Question

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

Answer 1

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