how can i have 2 background images??

firestormer · 03-Nov-2007, 02:56 PM #1

How can i place two images, left.png and right.png as background images in a html web page?

i want left.png to be portioned top left and repeat vertically and right.png to be positioned top right and repeated vertically.

now i can use the following code in the <head> to place one of the images:

Code:

<style type="text/css">
  body {
  background-image: url("backgrnd/left.png");
  background-position: top left;
  background-repeat: repeat-y;
}
</style>

how can i place 2?

biagrin · 03-Nov-2007, 03:07 PM #2

if your site is a fixed width then you could just use an art program to make the 2 images into 1 and then repeat them in the code.

if its fluid then i have no idea how to do it, sorry

firestormer · 03-Nov-2007, 04:19 PM #3

Well i would prefer not to make it fixed width as these days there are a lot of different sized monitors.

MMJ · 04-Nov-2007, 06:33 AM #4

There might be a way to do it, not too sure but what you can do is split the body in half than give each one a bg image.

Fyzbo · 05-Nov-2007, 08:35 AM #5

You can have one background image on the body tag and the other on the html.

body {
background-image: url("backgrnd/left.png");
background-position: top left;
background-repeat: repeat-y;
}
html {
background-image: url("backgrnd/right.png");
background-position: top right;
background-repeat: repeat-y;
}

froggyb · 25-Nov-2007, 08:30 PM #6

Hi there,

Similar to what Fyzbo said, you can put a background for an element layered one on top of another using the <div> element. Same as above but use e.g. div.bgimg{width:100%; height:100%;} into your div css to resize them accordingly. Then stick a <div> tag between your <body> tags. Hurrah!

This also works for rounded corners where you can have four nested divs, one for each corner.

Hope this helps!

Chris

firestormer · 26-Nov-2007, 03:16 AM #7

great thanks for all the help

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)