[CSS] Having two backgrounds on the same element.

Hey there, I'm in need of some help with some CSS, is there any way to have two backgrounds in the same element?

For example. I have `bg_float_left.png` which floats in the bottom left hand corner but when I do that my main background goes away which is `BG.jpg`, and I also don't want to resort to nested divs

Code:

---

body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #68BDFF;
        background-image: url(images/BG.jpg);
        background-repeat: repeat-x;

        background-image: url(images/bg_float_left.png);
        background-repeat: no-repeat;
        background-attachment:fixed;
        background-position: bottom left
}

---

Picture of what I want it to look like but at the moment it the `bg_float_left.png` overwrites the previous `bg.jpg`.

http://img508.imageshack.us/img508/5486/fyisj3.jpg

I don't remember what the code was, but your not floating the image, your just chaning the bg image to another. Try float-image or something, like I said, I don't really remember.

Wow I cant figure this out :S I've been sitting here for the last 20 minutes trying lol

This is what I got so far, the bottom left one isn't float in a fixed position, and the background repeats over and over so meh

http://img206.imageshack.us/img206/9938/desktop2uh9.jpg

& this is my CSS document

Code:

---

@charset "utf-8";
/* CSS Document */

body {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
background-image: url(images/back.jpg);
background-image: repeat-x;
background-color: #68BDDF;
/*background-image: url(bg_float_left.png);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: bottom left;*/
}

img.floatBotLeft {
    float: bottom left;
    margin: 0px;
}

h1 {
font-size: 11px;
font-weight: bold;
}

td, table {
border: 1px solid #000000;
background-color: #6896AE;
vertical-align: top;
text-align: left;
padding: 2px;
}

a {
text-decoration: underline;
font-weight: bold;
color: #003399;
}

a:hover {
text-decoration: none;
font-weight: normal;
color: #FFFFFF;
}

.code {
background-color:#CCCCCC;
font-family: Verdana;
vertical-align: top;
text-align: left;
font-size: 9px;
color: #000000;
border: 1px dashed #000000;
width: 400px;
align: center;
}

#code {
vertical-align: top;
}

---

Make a separate div for the background image, then just use position:bottom-left;

background: url('images/BG.jpg') repeat-x;

//edit oh wait, you've already got repeat-x there, dunno then, do as Pie said I guess.

Quote:

---

Originally Posted by Pieman

Make a separate div for the background image, then just use position:bottom-left;

---

Yeah I did it like that and he said he didn't want to use divs.. It's like the only way around it lol.

Code:

---

background-image: repeat-x;

---

should be

Code:

---

background-repeat: repeat-x;

---

or

Code:

---

background:url(images/back.jpg), repeat-x, #68BDDF;

---

that will fix the repeating error.. You should only use each statement once per class.
So for the body class, only use background: once, or background-image: once. Alot of people make the mistake of repeating lines in CSS where they shoudn't be repeated.. I've had my share of problems with this -.-
It's not smart to say

Code:

---

background: black;
background: url(blahblah);
background: no-repeat;

---

Some browsers will probably fly through it without a problem.. but I don't think it's wise to do it like that.. Who knows..

As for having multiple images in one class.. not what you want right now. This will just tell the browser to pick one of the two images and display something. Some browsers might give an error.. I dunno exactly.. never done this.. Just guessing that it's not good.

Does that mean it's impossible? No of corse not.. You can achieve this effect by creating a new class, and applying it to a div or table at the part of the page you want it to be. I'd suggest a div in this case.. In fact.. Just do what pieman said, but change the little CSS error we all missed before.

Edit: So you have to use tables, eh? I like your style. There are a number of ways you can do it then.

You can probably cheat by editing the <body> tag.. but that might not work..

Code:

---

<body style="background-image: url(images/bg_float_left.png);background-repeat: no-repeat;background-attachment:fixed;background-position: bottom left;">

---

I don't know if that will work.. But if you have a main table that contains the bottom-left part of the site where you want the image, then just put the style=".." in that table. Or.. make a new class with that information and do it that way.. There's all sorts of ways to cheat in the web-business!

Just be creative ;)

>.< the otherway around is set the position:absolute the set the paramete of Top,Left and also you can use Z-index