CODEWITHSUNDEEP
cssbackground
coffeemonitor
coffeemonitor

Reputation: 13130

CSS Deciphering Background shorthand

I need a little help with breaking down someone's shorthand to longhand.

Here's what I've been given:

background: url("img.png") repeat scroll 0 0%, -moz-linear-gradient(#4E4E4E, #1C1C1C) repeat scroll 0 0 transparent;

I've gotten this far:

background-image:url('jAGNPCMaDe9LJ5wqwVhLimg.png');

But the rest is definitely greek to me. I'm curious about the -moz-linear-gradent(). Is this something all browsers recognize? And I'm guessing the colors in the parenthesis must apply a gradient effect (deducing from -moz-linear-gradient) And what does "repeat scroll 0 0%" do?

Upvotes: 0

Views: 284

Answers (4)

BoltClock
BoltClock

Reputation: 724112

As cimmanon has mentioned, you're actually looking at two backgrounds combined into a single background shorthand declaration. The comma separates the two layers. This combination of multiple backgrounds is new to CSS3. So, you have two distinct background layers in shorthand notation:

url("img.png") repeat scroll 0 0%
-moz-linear-gradient(#4E4E4E, #1C1C1C) repeat scroll 0 0 transparent

And each expands to its own set of values.

The correct longhand expansion of your code is this:

background-image: url("img.png"), -moz-linear-gradient(#4E4E4E, #1C1C1C);
background-repeat: repeat, repeat;
background-attachment: scroll, scroll;
background-position: 0 0%, 0 0;
background-color: transparent;

Notice that, again, commas are used to separate multiple background layers. There is only one background-color because you cannot have multiple background colors.

Also as mentioned, the -moz- prefix is Mozilla's vendor extension used for its experimental implementation of linear gradients. However, unless your background declaration is repeated for all other applicable vendor extensions, your code will only work in Mozilla browsers and no other browser because of the vendor extension.

Note also that if you use the longhand code above instead of the shorthand, unsupporting browsers will only ignore the background-image declaration and apply everything else, unlike the shorthand which unsupporting browsers will ignore completely.

Upvotes: 3

Sven Bieder
Sven Bieder

Reputation: 5681

here's your longhand:

#element{
  background-image:url(img.png);
  background-repeat:repeat;
  background-attachment:scroll;
  background-position:0 0;
  background-color:transparent
  background-image:-moz-linear-gradient(#4E4E4E, #1C1C1C);
}

The -moz-linear-gradient only works in Mozilla. That is why it is pre-fixed with -moz-. As you guessed right it makes a linear gradient as background, instead of the picture. But only in Mozilla, all other browsers use the background rules. The options of the gradient don't need to be repeated, because they are the same as for every other browser.

Upvotes: -3

onoma
onoma

Reputation: 103

Take a look at the Mozilla reference here and the main section here. These should provide you with a good "way in" and an explanation of the -moz-XXX prefix.

Upvotes: 0

cimmanon
cimmanon

Reputation: 68329

You're actually looking at multiple backgrounds there. The comma is the separator.

url("img.png") repeat scroll 0 0% /* on top */
-moz-linear-gradient(#4E4E4E, #1C1C1C) repeat scroll 0 0 transparent /* on bottom */

The gradient is taking the spot of the background image. The rest should be easy to figure out by reading up on the background property.

https://developer.mozilla.org/en-US/docs/CSS/background

Upvotes: 2

Related Questions