0

Is it possible to use two images for div background in css. That is i have two images. one just the background color and the other logo. I am using the code some what like this.

        .header{
        background-attachment: scroll;
        background-clip: border-box;
        background-color: transparent;
        background-image: url("./img/logo.png");
        background-origin: padding-box;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 400px 90px;
        height: 90px;
        width:100%
        -webkit-border-radius:7px;
        background: url(img/header_background.jpg) repeat-x;

            }

whats happening is the last image i declared in background its overwriting previous. Could anyone let me know the solution for this

user755043
  • 1,657
  • 3
  • 12
  • 12
  • 1
    If the "background color" image is just a solid color, you can just set it directly with `background-color: XXX` – cdeszaq Oct 04 '11 at 14:22
  • take a look here: http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css – malificent Oct 04 '11 at 14:23
  • `background` is shorthand for the properties above it. That's not specifically your problem, but something to also watch out for. – DA. Oct 04 '11 at 14:29
  • possible duplicate of [Layering images in CSS - possible to put 2 images in same element?](http://stackoverflow.com/questions/402200/layering-images-in-css-possible-to-put-2-images-in-same-element) – David Z Oct 04 '11 at 19:48

3 Answers3

1

Use a comma-separated list of background properties to define multiple backgrounds. This feature is only available in the most recent browsers though.

See also: https://developer.mozilla.org/en/CSS/background-image

Extra info:
Adding background after a bunch of background- properties overwrite all of the previously defined background-properties. The reverse order, however doesn't:

background: red;
background-image: url("transparent-circle.png");
/*Shows the image, with a red color at the transparent sections of the image*/
Rob W
  • 341,306
  • 83
  • 791
  • 678
0

You need 2 div's for that,

you can stay with .header but there should be div with class header_logo inside

i.e.

.header{
        background-attachment: scroll;
        background-clip: border-box;
        background-color: transparent;
        background-image: url("./img/logo.png");
        background-origin: padding-box;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 400px 90px;
        height: 90px;
        width:100%
        -webkit-border-radius:7px;
 }

.header_logo {

        height: 90px;
        width:100px;    
        background: url(img/header_background.jpg) repeat-x;
}
Krzysztof Kowalski
  • 328
  • 2
  • 7
0

In CSS3 you can use Multiple Backgrounds. But you probobly will have issues with IE

huMpty duMpty
  • 14,346
  • 14
  • 60
  • 99