PDA

View Full Version : Help with a background image


BonoboUK
07-09-2011, 04:18 AM
Hi guys,

I've made a website with a central content area of 900 px,

My rather ingenius plan or so I thought was to make a new image in photoshop with a blank 900px space in the middle, with the two photos I want on either side. However this of course won't resize for various browsers,

Is there any way around this? Ideally I'd like the two photos (or 1 photo with space in the middle) to automatically stretch and fill the rest of the screen,

Thanks in advance!!

edbr
07-09-2011, 04:29 AM
you could float one left and one right .

edbr
07-09-2011, 04:47 AM
i just realised you said background image,

you could try with css 3

#exampleA {
width: 900px;
background: url(iamge1.png) left top no-repeat, url(image2.png) right top no-repeat;
}

BonoboUK
07-09-2011, 06:41 AM
Hey and thanks for the quick reply,

The only issue with your method is that it doesn't resize the photos to fit whatever margin may be left either side of the 900 center, depending on the browser,

I don't even know if what I'm trying to do is possible using CSS but if it is then help would be much much appreciated!

edbr
07-09-2011, 07:07 AM
ah so you want image 900 px area then image 2. i miss read that again .
basically you are looking at a three column layout. re the images it is not possible realistically without javascript i would say. there was a post recently re resized background images have a search trough the forum

gentleone
07-09-2011, 07:27 AM
You can add another CSS3 property to it which is the background-size property. Both CSS3 properties are supported in modern browsers including IE9.

http://www.w3.org/TR/css3-background/#the-background-size