CODEWITHSUNDEEP
css
Mohsen
Mohsen

Reputation: 65815

background-size in shorthand background property (CSS3)

I'm trying to mix background-image and background-size properties in a shorthanded background property. Based on W3C documentation background-size should come after background-position property separated with an slash(/).

W3C example:

p { background: url("chess.png") 40% / 10em gray
       round fixed border-box; }

is equivalent to:

p {
    background-color: gray;
    background-position: 40% 50%;
    background-size: 10em 10em;
    background-repeat: round round;
    background-clip: border-box;
    background-origin: border-box;
    background-attachment: fixed;
    background-image: url(chess.png) }

MDN says same thing. I also found this and this article about shorthand CSS3 background property explaining this.

But this is not working! It also is not clear how to make a shorthand background property when background-size and background-position have two different values for background-position-x and background-position-y or same thing for background-size. It's not clear how the slash(/) takes place? This example is not working in my Chrome 15.

Example I tried to make a shorthand is this CSS code:

div {  
    background: url(http://www.placedog.com/125/125) 
        0 0 /  150px 100px 
        repeat no-repeat 
        fixed border-box padding-box blue;      
    height: 300px;
    width:360px;    
    border: 10px dashed magenta;  
}

A cleaner example

This is working (JSFiddle)

 body{
        background-image:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png);
        background-position:200px 100px;
        background-size:600px 400px;
        background-repeat:no-repeat;
    }

This is not working (jsfiddle)

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px 100px/600px 400px no-repeat;
}

This is not working too(jsfiddle)

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px/400px 100px/600px no-repeat;
}

Upvotes: 134

Views: 127621

Answers (5)

Kraz
Kraz

Reputation: 7090

  1. Your jsfiddle uses background-image instead of background
  2. It seems to be a case of "not supported by this browser yet".

This works in Opera : http://jsfiddle.net/ZNsbU/5/
But it doesn't work in FF5 nor IE8. (yay for outdated browsers :D )

Code :

body {
  background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 200px / 600px 400px no-repeat;
}

You could do it like this : 

body {
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 400px no-repeat;
    background-size:20px 20px
}

Which works in FF5 and Opera but not in IE8.

Upvotes: 73

vignesh
vignesh

Reputation: 466

You can do as 

 body{
        background:url('equote.png'),url('equote.png');
        background-size:400px 100px,50px 50px;
    }

Upvotes: 16

Daniel
Daniel

Reputation: 1799

Just a note for reference: I was trying to do shorthand like so:

background: url('../images/sprite.png') -312px -234px / 355px auto no-repeat;

but iPhone Safari browsers weren't showing the image properly with a fixed position element. I didn't check with a non-fixed, because I'm lazy. I had to switch the css to what's below, being careful to put background-size after the background property. If you do them in reverse, the background reverts the background-size to the original size of the image. So generally I would avoid using the shorthand to set background-size.

background: url('../images/sprite.png') -312px -234px no-repeat;
background-size: 355px auto;

Upvotes: 9

MizoPro
MizoPro

Reputation: 21

try out like this

body {
   background: #fff url("!--MIZO-PRO--!") no-repeat center 15px top 15px/100px;
     }


/* 100px is the background size */

Upvotes: 2

Moin Zaman
Moin Zaman

Reputation: 25455

You will have to use vendor prefixes to support different browsers and therefore can't use it in shorthand. 

body { 
        background: url(images/bg.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Upvotes: -7

Related Questions