Welcome to WebmasterWorld Guest from

Forum Moderators: bakedjake

Message Too Old, No Replies

Make images adaptive is really a headache! I need your help!

2:48 am on Aug 7, 2012 (gmt 0)

New User

5+ Year Member

joined:Aug 7, 2012
votes: 0

I have 2 problems I can't solve myself. I need your help.

1. I want to make a responsive website. So I set proportional value for the width of all the main parts of the site.

Part of the css as follow:

#header, #footer {
width: 100%

div#header {

div#footer {

So when I view the site in a smaller screen, the site goes fluid and the #header and #footer are smalller. But the problem is the background images are not smaller. So only part of the images can be seen.

How to solve this problem?

2. I also use the adaptive-image script so that I can make all the images adaptive. But when I ran this script on my hosting, something strange happened. The script worked, but it only worked for 3 images.I checked the ai-cache folder, it only worked for the header, footer and content div background images. It didn't work for other images within the content. Why this happened? All the images are in the same folder!

How can I get the script work for all the images?
3:24 am on Aug 7, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
votes: 97

div#header {
background: url('your_image_url') left top no-repeat;
-moz-background-size:100% auto; /*use auto 100% if you want it to resize based on height */
background-size:100% auto;
div#footer {
background: url('your_image_url') left top no-repeat;
-moz-background-size:100% auto;
background-size:100% auto;

Instead of a script, you can use multiple style sheets:
<link rel="stylesheet" type="text/css" href="max_width_320.css" media="only screen and (max-width: 320px)" />
<link rel="stylesheet" type="text/css" href="width_321_480.css" media="only screen and (min-width: 321px) and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="width_481_800.css" media="only screen and (min-width: 481px) and (max-width: 800px)" />
<link rel="stylesheet" type="text/css" href="min_width_801.css" media="only screen and (min-width: 801px)" />

However, since IE8 and below have trouble with max-width and max-height, among other things, so you should include a conditional style sheet for less than or equal to IE8 using fixed widths:

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" media="all" />


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members