 |  |  |  |  |  |  |  |
Small problem with backgrounds
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
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!
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.
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:
http://www.backstreetboys.com//images/bg-4.gif
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:
http://www.backstreetboys.com//images/bg-4-gradient.gif
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]
<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>[/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.
http://www.backstreetboys.com//images/bg-4.gif
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:
http://www.backstreetboys.com//images/bg-4-gradient.gif
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]
<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>[/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.
Last edited by tgreer; Sep 1st, 2006 at 5:39 pm.
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.
Wherever I've searched, it has been recommended to use
<div style="display: inline;">
but this just causes the image to disappear again.
•
•
Join Date: Jun 2004
Posts: 434
Reputation: 
Solved Threads: 20
Posting Pro in Training
Using the images from the post below, this displayed nicely in IE and Firefox...
[html]
<!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>
[/html]
[html]
<!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>
[/html]
|
Similar Threads
- A small problem in the output (C++)
- Processor problem (Motherboards, CPUs and RAM)
- Small problem with Run... command (Windows NT / 2000 / XP)
- Tad small problem (Windows NT / 2000 / XP)
- Small problem with web links? (Windows 95 / 98 / Me)
- Java Game Applet Too Small (Java)
- ** Need Help ** in a small C++ problem (C++)
Other Threads in the HTML and CSS Forum
- Previous Thread: schedule html code
- Next Thread: finding out variable type from html input type tag in javascsript
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest HTML and CSS Posts
- Today's Posts
- Unanswered Threads
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
