CSS repeating image question

Forum Moderators: not2easy

Message Too Old, No Replies

CSS repeating image question

mazoboom

2:15 am on Sep 5, 2004 (gmt 0)

Why does:

body {
background:#336666;
color:#6699CC;
background-image:
url("images/rightln.gif");
background-repeat: repeat-y
background-image:
url("images/vline.gif");
background-repeat: repeat-x
}

act differently than:

body {
background:#336666;
color:#6699CC;
background-image:
url("images/vline.gif");
background-repeat: repeat-x
background-image:
url("images/rightln.gif");
background-repeat: repeat-y
}

And repeat-y does not work by itself, only when I've added repeat-x after it (NOT before it, meaning only example 1 works.)

I'm new to CSS, and this is odd.

bedlam

2:33 am on Sep 5, 2004 (gmt 0)

Hm. Well, if I remember correctly, CSS is parsed sequentially, so the second image part of your declarations as shown just cancel out the first parts of them. Besides that, you can't have two background images for the same element (e.g. the <body> element).

Try simplifying the css a bit, and see what effect it has:

body {
/*
* This line defines (in order) the background color,
* the background image, how the background image is
* repeated, and where the first background image is
* placed:
*/
background:#336666 url("images/rightln.gif") repeat-y top left;
/* This line defines the text-color in this element: */
color:#6699CC;
}

If you are trying to have two backgrounds repeating simultaneously and differently, you will probably have to do something like make the first element inside the <body> a <div> that covers the full size of the screen with its own background properties:

{ document head }
<body>
<div class="background-2">
{ everything else }
</div>
</body>
</html>

-B