Two Background Images [Archive]

Click to See Complete Forum and Search --> : Two Background Images

metrosea

11-27-2007, 03:43 PM

Can anyone suggest the best CSS way to tile to background images?

Here's the scenario. I have toptile.gif and back.gif.

I would like to tile toptile.gif all along the top of the browser only. In other words, repeat-x.

I would like to tile back.gif to fill up the rest of the space to be tiled vertically and horizontally.

As for scrolling, I want the image to move as you scroll. I don't want it to be fixed.

Can anyone help?

Centauri

11-27-2007, 03:48 PM

Easiest would be to apply back.gif as a tiled background to the body, and apply toptile.gif to the background of an overall wrapper div full width of screen.

KDLA

11-27-2007, 03:48 PM

If I remember right, IE6 doesn't recognized a fixed background, unless it is in the <body>, so that pretty much tells you where to put the "fixed" background.

I suggest putting the other in a div, with a width: 100% and a height specified.

KDLA

metrosea

11-27-2007, 04:07 PM

thanks!

metrosea

11-28-2007, 04:04 PM

Ok so that worked but...

as you can see here http://www.metrofader.com/index2.php there is a margin around the DIV. how do I remove that?

Centauri

11-28-2007, 04:17 PM

This is default margins applied to the body element. Browsers add default margins and/or padding to a lot of elements, and the type and magnitude varies between browsers. To get around this, it is quite common to zero all of these defaults out to start with using teh universal selector at the start of the css file :* {
margin: 0;
padding: 0;
}

The body background should also be applied via the css :body {
background-image:url(../images/bg.gif);
}

WebJoel

11-28-2007, 04:40 PM

Another method: apply a background to the html, and another to the body:

html {background-image:url(name.jpg)...}
body {background-image:url(name2.jpg)...}

I have used this before to apply a textured background to html, and a fixed image to body.
This frees-up any need for a background-image for actual content (wrapper, etc) if your content so needs it..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}
html {background: #fff url(backgroundImg.gif) repeat fixed center center;}
body {height:100%; font-size:1.0em; background: url(watermark.gif) repeat-y fixed center center;
margin:0; padding:50px 30px 25px 30px;}
p {font-size:1.1em; font-family:verdana; margin:4px;}
p:first-letter {font-size:2.0em; font-style:italic; font-family:'times new roman', arial, serif; margin-left:8px;}
img {padding:10px;}
h1 {font-style:italic; margin-left:20px;}
h1:first-letter {font-size:1.6em;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h1>Got Ipsum?</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

</body>
</html>