Home/ Questions/Q 9108617
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T02:51:01+00:00

Apologies for a terrible title. I’ve been teaching myself responsive design techniques, and all

  • 0

Apologies for a terrible title. I’ve been teaching myself responsive design techniques, and all the blogs I read seem to talk about there being issues with downloading desktop sized images for mobile platforms, multiple image loading, or requiring javascript. I wrote a little fiddle that does dynamic resizing using media queries and the padding-top aspect ratio trick. It works fine, and loads the correct image on start (at least in Chrome at this point), and goes up and down correctly (you’ll have to open your network monitor to see).

I’m glad it works, I am however concerned about using this on my pages — Will this have any severe impact on me with google spiders (since they’re background images and not images). Are there any caveats that I’m glaringly missing here?

Code is as simple as it gets:

HTML:

<!-- padding top equal to aspect ratio -->
<div style="padding-top:75%;width:100%;" id="image"></div>

CSS:

html, body { margin: 0; padding: 0; }

#image {
  background-repeat: no-repeat;
  background-size:   100%;
  border: 1px solid #000;
}

@media screen and (max-width: 320px) { 
    body { width: 240px; margin: 0 auto; }
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec_n.jpg');
}}
@media screen and (max-width: 500px) {
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec.jpg');
}}
@media screen and (max-width: 640px) {
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec_z.jpg');
}}
@media screen and (min-width: 641px) {
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec_b.jpg');
}}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Be careful with using background-images as your content photos. If those images are essential to the content, they won’t be seen if CSS is turned off (RSS readers for instance), and the usability for screen-readers wouldn’t be good as you wouldn’t have alt text for them. Don’t forget alt text for SEO as well if you’re looking to get searched for.

    However, if your images aren’t essential and are merely decoration then there isn’t a problem using background-images as far as I know.

    • 0