CSS Help

chris_r · 2 Nov 2006 at 06:03

Hello,

I am trying to get an image to show on the bottom right and left, however i can only get it to show on one. How can i get the image to appear on both sides and still work on all monitor sizes like the one sided one

The code i am using is:

Code:

	  background-image: url(http://wehavetomorrow.co.uk/templates/mp_siouxbg/images/me.gif);  
	  background-repeat: no-repeat;
	 background-position: bottom left;

	  background-image: url(http://wehavetomorrow.co.uk/templates/mp_siouxbg/images/me.gif);  
	  background-repeat: no-repeat;
	 background-position: bottom right;

As you can see on wehavetomorrow.co.uk it is only showing on the bottom right.

Thanks

LazyManc · 2 Nov 2006 at 09:50

chris_r said:
Hello,

I am trying to get an image to show on the bottom right and left, however i can only get it to show on one. How can i get the image to appear on both sides and still work on all monitor sizes like the one sided one

The code i am using is:

Code:

background-image: url(http://wehavetomorrow.co.uk/templates/mp_siouxbg/images/me.gif); background-repeat: no-repeat; background-position: bottom left; background-image: url(http://wehavetomorrow.co.uk/templates/mp_siouxbg/images/me.gif); background-repeat: no-repeat; background-position: bottom right;

As you can see on wehavetomorrow.co.uk it is only showing on the bottom right.

Thanks

You can't assign a css property twice to the same element - the second block of css will just overwrite the first. You will need to use a second element and apply the alternative css to that instead.

chris_r · 2 Nov 2006 at 13:51

Hey,

How can i do that mate....sorry for sounding the fool.

Thanks

LazyManc · 2 Nov 2006 at 14:04

Something like this:

Code:

<html>
<head>
<style>
#outerDiv{
	height: 500px;
	background: url(example.jpg) bottom left no-repeat;
}

#innerDiv{
	height: 100%;
	background: url(example.jpg) bottom right no-repeat;
}
</style>
</head>
<body>
<div id="outerDiv">
	<div id="innerDiv">
		<!-- all content here -->
	</div>
</div>
</body>
</html>

Should work...