Hello I want to use the background image twice, once positioned to the left and once to the right, however horizontally in line with each other. I have used this code below but it does not work. How do I go about doing it?

 

 

body {

text-align: center;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 1em;

color: #333;

background: url(bg.jpg) bottom left no-repeat;

background: url(bg.jpg) top right no-repeat;

background-color: #000000;

}

Hello I want to use the background image twice, once positioned to the left and once to the right, however horizontally in line with each other. I have used this code below but it does not work. How do I go about doing it?

 

 

body {

text-align: center;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 1em;

color: #333;

background: url(bg.jpg) bottom left no-repeat;

background: url(bg.jpg) top right no-repeat;

background-color: #000000;

}

 

You can't use two background images, you would need to create nother way of doing it.

 

Can you explain what your trying to achive or attach an image so I can see another way I don't know why you would you two images? why not just one?

There is a way with css3.. but it's prob best not to use it for now.

 

http://www.css3.info/preview/multiple-backgrounds/

 

Only safari supports it at the moment (although firefox are said to be including it in the their next update).

 

 

A way around it would be maybe have it split into divs instead and have each one a different background?

 

Also your using the same image? Can you not just reapeat it along the whole body?

as chris said, set your background for the main image, then use a div, setting the width and height to be big enough to hold the other image

 

an example

body { background:url(image1.png);}
#wrap { background:url(image2.png);width:50%;float:right;height:100%;}

Check this out

 

http://www.protocoder.com/css/css-multiple-backgrounds-background-layering-with-jquery/

You can put one background-image on the html and another on the body:-

<style type="text/css">

 

html { background: #eeeeee url(images/orangew90x90.jpg) top left

fixed no-repeat; }

 

body { margin: 0; background: url(images/orangew90x90.jpg) top right fixed no-repeat; }

 

</style>

 

I've tested the above with two small images that sit at the top left and top right; if you use two large images the body one will overlap the html one at small window resolutions. You need margin: 0; for the body to make it sit at the top of the window as the html one will be there (unless you specify top positions).

 

I've used the same image but it could be a different one.

Hey thanks for your help guys. I will try and explain what exactly what it is I am trying to do, it may be an easier task than you think. I have looked for the info on how to do it and played around with it and it is driving me insane lol.

 

This is my portfolio address www.cherriewebdesign.com

 

What I am trying to do is oppose to having a plain black background I am trying to use the attached photo and have it positioned both to the left and right hand side in the black background. So the people are at the top at the black space to the left and right of the header.

Could you not just make a new header in photoshop? With that image on the left, and copy it and have one on the right. And between those have a gap the same size as the header?

I used the styles in my previous post and it looks like this:-

http://www.wickham43.com/forumposts/delcherriewebdesign090809.html

CSS:-

http://www.wickham43.com/forumposts/delstyle090809.css

 

Is that what you want? The two images behind the header, one on the left and one on the right? Each sticks to its side if the window size changes.

I used the styles in my previous post and it looks like this:-

http://www.wickham43.com/forumposts/delcherriewebdesign090809.html

 

Is that what you want? The two images behind the header, one on the left and one on the right?

 

 

Didn't know you could do that! Learn something new everyday. By the sounds of it that sounds what he wants, unless he wants the whole image on the left and the whole image on the right, but then that just needs adjusting of sizes.

Hello, yeah that is exactly what I am looking for Wickam. The example you created with the two pics in the background. Thank you. If I just use the html and css code should it work fine?

I used your codes basically; although I may have changed urls to suit my folder structure, but you should be ok. I changed cherriewebdesignheader3.jpg to cherriewebdesignheader3a.jpg because I had an old version of 3 already in my folder and I put images in a images sub-directory.

Hey Wickam thanks for the help, there is one small problem, I am viewing it In IE 6 and it creates a gap to the right hand side of the header of about 10-20px and creates a big white gap to the side of the content. I am assuming I will have to put something in my IE 6 stylesheet. What is it?

I've checked my version in IE6 and the two images are top left and top right, but your page doesn't seem to have been edited yet so I can't see the problem.

 

Look at the first few items in my css file posted previously.