dumb css question

[synaps3]

I have a stylesheet (read: ONLY the stylesheet. I can't edit anything else), and I need to make two different images in the background. One tiles, and the other just stays in place aligned to the left. Here is what I've come up with:

background: #486e98 url(header-mid.png) repeat-x 0px 0px;
background: transparent url(header-left.png) no-repeat 0px 0px;

But all I get is the second image. I am a complete and total noob to css, so I am guessing this is invalid and it will only take the second image. How can I get both to display?

Thanks!

 

[Dyslexic_Dog]

If you set the same variable twice you'll always get the second value...

$x = 1
$x = 2


echo $x

output would be 2 every time

I'm not a css master but you should be able to create a box of some sort not sure if you would be able to call the second image.

EDIT: Just thought of something. You can make the Background for the whole site and the background for the body tag different that should be able to do what you need.

 

[Langford]

If you specify two different values on the same item, only the last one will be shown. To show two images, you need to attach each image to a different item.

 

[synaps3]

Well, like I said, I only have access to the css file. Is there a way I can get the other image to display using only the css?

I'm going to ask if I can get access to other files, it would make things a hell of a lot easier.

 

[Dyslexic_Dog]

if I could see the html and css it would make this very easy.

 

[ne1wantaride]

You can't specify two background css tags. What's happening is the computer is interpreting it as typed, place this background, then place this background instead. So the only way to do it is to use the initial line with the repeat background. Then create a separate class in your css file, example below. Then use a DIV tag to place the holder on the page. Easiest way by far. And the most code compliant.

body {
background-image: ('header-mid.png');
background-repeat: repeat-x;
}

.image {
position: absolute;
top: 0;
left: 50%;
margin-left: -404px;
width: 800px;
height: 0px;
visibility:visible;
background-color: transparent; 
}