CODEWITHSUNDEEP
htmlcss
sagar
sagar

Reputation: 1432

Need to understand CSS3 background shorthand property

I am trying to understand following CSS3 background shorthand property and need to break it down in individual properties. I am not able to figure out what are actual properties for values 98% and center in below shorthand property

background: url(../images/icon-error-small.png) no-repeat scroll 98% center #FFFFFF

Upvotes: 1

Views: 144

Answers (3)

Praveen
Praveen

Reputation: 56509

Shorthand notation for background properties:

background:  [background-image] [background-repeat] [background-attachment]  [background-position] [background-color];

On breaking:

background-image: url(../images/icon-error-small.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 98% center;
background-color: #FFFFFF;

Upvotes: 2

leigero
leigero

Reputation: 3283

Your best bet when you have questions like this is to go straight to the source. It's even got a section for shorthand which, I believe, will answer your question and help understand the other aspects about shorthand and CSS3 that may be confusing to you.

http://www.w3.org/TR/css3-background/

 <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157374

The break down goes like

background: url(../images/icon-error-small.png) - Image URL

no-repeat - Background Repeat

scroll - Background Attachment

98% center - Background Position (X-98%, Y-center)

#FFFFFF - Fall Back Color

Upvotes: 4

Related Questions