2

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.)

steveax
  • 17,527
  • 6
  • 44
  • 59
GiorgosTekos
  • 21
  • 1
  • 7
  • 1
    Don't mix the shorthand `background` and separate background properties like `background-color` in one style rule. Some browsers may not handle that correctly. Either use only `background`, or write out all the separate properties in full. – Mr Lister Mar 15 '12 at 13:16
  • Related: http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css, which talks about the nested divs solution. You'll either need to do that or use a polyfill for IE7/8 support. – ddrace Mar 15 '12 at 13:20
  • Mr Lister>> you are absolutely right about shorthand, something very important that almost no post warns you about it. Trial and error led me to the solution of proper syntax. – GiorgosTekos Mar 16 '12 at 18:38
  • ddrace>> well i solved my problem using one div inside the other, so i managed to have 2 backgrounds ... kind of complicated to be done but in the end , the result is what i want. – GiorgosTekos Mar 16 '12 at 18:39

2 Answers2

3

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.

Fabian
  • 3,465
  • 4
  • 34
  • 42
  • How can i have two extra divs???? this is the proccedure I want someone to explain me , please – GiorgosTekos Mar 15 '12 at 15:42
  • 1
    Are you looking for something like this: 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 – Fabian Mar 15 '12 at 16:34
  • If this is what you were looking for, I'll update my question with this example:) – Fabian Mar 15 '12 at 16:57
  • thank you all , using this http://icode4you.net/using-two-background-images-for-one-div-in-ie i made it. – GiorgosTekos Mar 16 '12 at 18:40
  • It's like what I showed you on jsfiddle. Maybe you want to mark my answer as accepted then:) Thanks. – Fabian Mar 17 '12 at 07:40
  • By clicking on the checkmark left to the answer:) http://i.stack.imgur.com/uqJeW.png – Fabian Mar 18 '12 at 16:33
-1

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;
}
Mike Samuel
  • 118,113
  • 30
  • 216
  • 245
user1264255
  • 305
  • 1
  • 5
  • 13
  • Dear User "user1264255">> This way it work ok in Chrome BUT NOT IE. – GiorgosTekos Mar 15 '12 at 15:40
  • Check your formatting and please read the question. The problem was with IE8/9. In IE9 the problem could have been using `background` instead of `background-image` and in IE8 multiple backgrounds are not supported. http://caniuse.com/#search=multiple%20backgrounds – Fabian Mar 15 '12 at 16:51