CODEWITHSUNDEEP
cssimage
GiorgosTekos
GiorgosTekos

Reputation: 21

Two background images in one element, but IE doesnt show it

I have a Sharepoint site and I want to change the logo. I want to have one picture to the left and one to the right side. So I created and uploaded a doublelogo.css file in the site's assets, containing the following:

.s4-title {
    background: url(PIC1.jpg), url(PIC2.jpg);
    background-color:#FFCC00;

    background-position: left, right;

    background-repeat: no-repeat;

    min-height:99px
}

after that i adds a reference to the <HEAD> section of my site (v4.master file) which is :

<link rel="stylesheet" href="/siteassets/doublelogo.css" media="screen" />

opening my site with Chrome, it works as expected. Even when I tested the pictures by zooming in and out the browser window, the pics where steady left and right. OK

But the problem is whenever i open the site with my ie8 or ie9.

I read there is a workaround about putting one div into another but i need help on that because i dont really understand the procedure.

Can someone assist me ?

(i actually want to have two logo because when i had one, and changing the resolution of my computer, the logo was increasing or decreasing, something i do no want.)

Upvotes: 2

Views: 722

Answers (2)

Fabian
Fabian

Reputation: 3495

Did you try background-image instead of background:

background-image: url(PIC1.jpg), url(PIC2.jpg);

If you want to support IE8 you can workaround this having two extra divs, IE9 should support two background image URL's.

Look at this list on caniuse.com for the browser support of multiple backgrounds.

Edit:

I created an example with nested divs:

http://jsfiddle.net/aUMnC

I used background-color and the div's have a different size just to show you, and you can simply use background-image instead.

Upvotes: 3

user1264255
user1264255

Reputation: 305

do it like this: example :

div.test {
    background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);
    background-repeat: repeat-y;
    background-position: top left, top right;
    width: 385px;
    height: 100px;
    border: 1px solid #000000;
}

Upvotes: -1

Related Questions