6 replies [Last post]
djk21
Offline
newbie
Last seen: 17 years 21 weeks ago
Joined: 2004-08-31
Posts: 4
Points: 0

Morning all, just wondering if anyone could help me out here...

I have a left border image that is currently my page background. However i was wondering if there was a way of setting more than one image as a background, for example...

The left border image + a picture fixed to the bottom right of the web page + a simple right border image (such as a straight vertical line that runs down the whole page.

I have tried a few variations but i can only seem to get one image (the left border) to appear. I don't know whether this is because the left border may actually be covering up the other images on the screen, or perhaps not.

Anyway i look forward to hearing from someone!

Thanks

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

How to embed more than one image into the background in CSS?

You can with <divs>. Just set the background for the divisions. You can't set multiple backgrounds to any element, though. The bottom right image sounds like it would be best set to the <body> background. Then have a division for the left and right side with a background set for each. Post if you need more help.

djk21
Offline
newbie
Last seen: 17 years 21 weeks ago
Joined: 2004-08-31
Posts: 4
Points: 0

How to embed more than one image into the background in CSS?

thanks for the reply,

so i can put <div> into my CSS file? How do i do this? Please, im still a newb so dont be mad!

If you could give me the example code that wud be cool thanks!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

How to embed more than one image into the background in CSS?

In the CSS file you use code like

#leftcol {
width: 100px;
background: etc;
}

and in the html you code

<div id="leftcol"> left stuff </div>

Verschwindende wrote:
  • CSS doesn't make pies

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 13 years 8 weeks ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

How to embed more than one image into the background in CSS?

If I'm understanding you correctly, I believe this should give you the desired effect;

CSS

#rightborderimage {
background: url(whatever-r.gif) top right repeat-y;
}
#leftcorner {
background: url(whatever-l.gif) top left no-repeat;
}
#rightcorner {
background: url(whatever-r.gif) bottom right no-repeat;
}

HTML

...
<div id="rightborderimage">
<div id="leftcorner">
<div id="rightcorner">
...
(content)
...
</div>
</div>
</div>

Basically, nested div's with background images that apply to each individual ID. Should also be fairly consistant across the modern browsers too.

Hope that helps.
cb

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

How to embed more than one image into the background in CSS?

A quick explanation:

#rightborderimage {
background: url(whatever-r.gif) top right repeat-y;
}

The # tells the browser it is a unique id for a div.

url(whatever-r.gif) is a direct link to the right image.

top right tells the browser where to place the image, and if it repeats, where to start.

repeat-y tells it only to repeat downwards.

For a cool effect, try changing 'top right' to 'middle right' or even 'bottom right', or even put a value in there to offset it. You can get nice results.

Verschwindende wrote:
  • CSS doesn't make pies

TimeBandit
Offline
Enthusiast
Maryland, USA
Last seen: 17 years 21 weeks ago
Maryland, USA
Joined: 2004-09-02
Posts: 112
Points: 0

How to embed more than one image into the background in CSS?

crazybat wrote:
Basically, nested div's with background images that apply to each individual ID. Should also be fairly consistant across the modern browsers too.

Yes, nested DIVs seems the best way. The site in my sig shows how i did a floating, expanding box with nested DIVS, one for each side and then more for the corners. That's DIV abuse at its best! (well some will argue "at its worst" i imagine...) Smile

css for the site is here:
http://www.waycoolwebdesign.com/website-design/css/way-cool-website-design-01.css