Log in

View Full Version : possible to have 2 backgroung images?



amyy
03-28-2008, 11:16 AM
May I know if it is possible to have 2 backgroung image,one on the left of the page and one on the right? If so how should i incorporate the image on the left in the code below? Many thanks in advance

BODY {
background: #000000 url(image1.jpg')
no-repeat fixed right center; }

codeexploiter
03-28-2008, 11:29 AM
You can have two div elements in left and right of your page and can set different background image for each of them.

Nile
03-28-2008, 11:40 AM
Or you can just use one image, but it is impossible to have 2 background images on a page. Period.

amyy
03-28-2008, 11:44 AM
You can have two div elements in left and right of your page and can set different background image for each of them.

May I know the code for two div elements in left and right of your page?

Nile
03-28-2008, 11:48 AM
This:


<style type="type/css">
#bg1 {
background: url('image.png') no-repeat;
width: 300px;
height: 500px;
}
#bg2 {
background: url('image2.png') no-repeat;
width: 300px;
height: 500px;
}
</style>
<div id="bg1">This is the first background</div>
<div id="bg2">This is the second one</div>

amyy
03-28-2008, 12:05 PM
Thank you very much.
I like to have 2 different images on the background, one on the left and one on the right.
The center is the contents of the page which can be scrolled up.
I tried using the above code but none of the 2 pictures appear:confused:

boogyman
03-28-2008, 01:02 PM
background: url('image2.png') no-repeat;
states that the image in is the same folder as the page that is accessing... so if your page was


http://www.ddforums.com/forums/thread.html

that script is saying your image is located at


http://www.ddforums.com/forums/image2.png


so just check the paths of the images in relation to the script (page) you are trying to access them from...

if the image are in the folder above the current one, just


../image2.png

and if the image is in a sub-folder of the the current folder do


folder/image2.png


The last thing is png files are HUGE, they take up a lot of band width, and they are of excellent quality, which usually isn't something that matters for a background image. My suggestion is that you optimize those images into a more "web-friendly" format such as GIF or JPG. This can be done with almost any image editing software, just hit "Save As" and choose one of those formats

Medyman
03-28-2008, 06:09 PM
Hi Amyy,

Even if you have the right image paths, Nile's code won't give you what (assuming that I understand you right).

What you want is something like this: http://www.dynamicdrive.com/style/layouts/item/css-left-and-right-frames-layout/