I'm not sure exactly how to search for a solution to this problem (unable to articulate it in googlable terms), so I'm posting here.
It should be very simple, all I need to do is start my background with one picture, and then continue the rest of the page with another. The aim is to get a gradually brighter background (first image) and then just a repeating pattern, with the same brightness (second image)
Any help would be appreciated!
You can only have one background, for any given element (such as the body itself). However, you can have an overall background color, with an image fixed at the top that fades into that color.
Have you seen something somewhere close to what you want? Give us a link, and we can likely break it down for you.
Ok, first, three images are used:
[IMG]http://www.backstreetboys.com//images/bg-4.gif[/IMG]
That is the background image of the body element. So, the entire body of the page is set to that image. It obviously tiles.
Next, we have:
[IMG]http://www.backstreetboys.com//images/bg-4-gradient.gif[/IMG]
This provides the "fade" effect, and is the background of a div element named "main". The "main" div comes right after/under the body, and everything else is inside of it. The style is set to repeat horizontally, but not vertically. Thus this image marches across the top of the page.
<html>
<head>
<style type="text/css">
body {
background-image:url(../images/bg-4.gif);
background-position:top center;
}
#main {
background-image:url(../images/bg-4-gradient.gif);
background-position:top center;
background-repeat:repeat-x;
}
#globalWrapper {
background-image:url(../images/shadow-4.gif);
background-position:top center;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="main">
<div id="globalWrapper">
</div>
</div>
<body>
</html>Lastly we have the image for the globalWrapper, another div after/under "main". It's too big to place here, but it's basically a "frame" for the page content, and isn't necessary for achieving the background effect.
To summarize: set the background of the "body" tag to your overall repeating pattern. Then place a div just under the body, and set its background to an image that is "darker" at the top, but is an exact match for the overall pattern at the bottom. Set it to repeat horizontally at the top of the page.
thanks for the help. got the image loaded up, but div causes a line break before it renders the image. There doesn't seem to be any easy way around.
Wherever I've searched, it has been recommended to use
<div style="display: inline;">
but this just causes the image to disappear again.
Using the images from the post below, this displayed nicely in IE and Firefox...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
background-image: url(bg-4.gif);
background-position:top center;
margin: 0px;
padding: 0px;
}
#main {
background-image: url(bg-4-gradient.gif);
background-position:top center;
background-repeat:repeat-x;
height:300px
}
</style>
</head>
<body>
<div id="main">
<div id="globalWrapper">stuff
</div>
</div>
</body>
</html>That did the trick. Thanks a lot.
Think I learned something new in th process as well. It seems I had placed the "margin: 0px" within the wrong brackets when I tried it.
Btw, can this part of the code from the BSB webpage be viewed?
Yep, you need to make sure to set the margin and padding of all block level elements to "0" if you want them to abut each other seamlessly.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.