CODEWITHSUNDEEP
csshtml
user755043
user755043

Reputation: 1667

can i use two images as background in a html div

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

Upvotes: 0

Views: 263

Answers (3)

huMpty duMpty
huMpty duMpty

Reputation: 14460

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

Upvotes: 0

Krzysztof Kowalski
Krzysztof Kowalski

Reputation: 328

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;
}

Upvotes: 0

Rob W
Rob W

Reputation: 348972

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*/

Upvotes: 1

Related Questions