CSS Help

Soldato
Joined
1 Dec 2003
Posts
2,818
Location
Liverpool
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
 
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.
 
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...
 
Back
Top Bottom