How to i make a background image auto adjust?

HTML & CSS
1

I was wondering if there was a way to make a background image auto adjust? So when people adjust the browser size my background fade image adjusts with it, so it won’t look like an empty space to the right (as shown in screenshot) if the browser is made larger? -Thanks

2

It’d be good if we could see the site you’re testing this on as it’s a bit difficult to give answers to problems when we have no information on how you’ve set up the markup and CSS.

Anyway, if I’m to assume that you want the gradient to expand horizontally at the bottom of every HTML document, then you’d do something like this:

body {
  background: #fff url(images/bottomgradient.png) repeat-x bottom;
}

If you contain your content inside elements that have a width other than 100% of the viewport, then the simplest solution is to have your background image set on the body itself.

3

The site is not live yet, so i can’t point you to a link.
Yes, i want the gradient to expand horizontally at the bottom of every HTML document. But what you suggested did not work for some reason.

4

This is standard code that works unless there’s something wrong with your code. We need to see code in order to help you, so please post the code you have.

5

Oh man. Okay, but it’s really sloppy (so far).

/*
CSS for New SilverPianoStudio site
*/

body {
width: 900px;
margin: auto;

}

p {
font-weight: bold;
color: #453C34;
font-family: Constantia, Times, Georgia;
}

h2 {
color: #5C0C0C;
font-family: Georgia, Times;
}

/* MENU */
#navmenu {
height: 50px;
width: 960px;
}

#navmenu li {
display: inline;
float: left 100px;
}

/*#navmenu li a {
font-family: Georgia, Palatino, ‘Palatino Linotype’, Times;
text-transform: uppercase;
color: #303030;
font-size: 14px;
text-decoration: none;
text-shadow: 1px 1px 0px #634747;
background: none;
}

#navmenu li {
display: inline;
float: right;
margin: 0 0 15px 0;
padding: 0 15px 0 15px;
padding-bottom: 12px;
border-left: 1px solid white;
border-right: 1px solid #D9D9D9;
}
*/
#navmenu li a {
border-right: 1px solid #D9D9D9;
padding: 5px 15px 14px 15px;
text-transform: uppercase;
font-family: Times New Roman, Georgia, Palatino, Times;
color: #3d3f3c;
font-size: 22px;
font-weight: bold;
font-style: none;
text-decoration: none;
text-shadow: 1px 1px 0px #FFFFFF;
background-image: url(images/gradient.png);
background-position: 0px -100px;
border-radius: 8px;
}

#navmenu li a:hover {
color:#5C0C0C;
text-decoration: none;
font-size: 22.5px;
background-image: url(images/gradientu.png);
background-position: 0px -160px;
border-radius: 8px;
}

/* ADJUSTMENTS */

.spslogo {
display: block;
margin: auto;
}

#navad {
position: absolute;
top: 100px;
left: 155px;
}

#iam {
float: right;
position: absolute;
right: 470px;
top: 150px;
margin: auto;
}

#wad {
position: absolute;
top: 330px;
width: 880px;
}

#adjust {
position: absolute;
top: 600px;
}

#vertfade {
background: #fff url(images/gradient.png) repeat-x bottom;
margin: ;
padding: 160px 1187px 140px 25px;
position: absolute;
top: 600px;
left: 1px;
}

I changed that image i was talking about to the #vertfade instead of the “body” (like mentioned earlier) because when i put it in the “body” element it puts it on the top, and no matter what i try it will not go to the bottom.

But i still have the same problem.

6

Oh dear… I think you’ll really need to start from scratch. This CSS is not workable in any which way.

Firstly, why have you set a fixed width on the body? The bg image cannot stretch if you set a width limit to the body. Also, why are you setting almost everything with position:absolute? Why such monstrous padding on #vertfade?

You really need to fix your CSS before anything can work. It’d be good if you read up on floats and how to create a solid layout before going any further.

Every CSS rule I see here needs to be changed into proper rules.