css backgrounds in Firefox 3.6

Firefox 3.6 allows you to do more with CSS backgrounds: you can use gradients, set a background size, and specify multiple backgrounds.

Custom Background Size

In Firefox 3.6, you can specify the size of a background image to scale it as a percentage of the element’s size, or to a specific length, using -moz-background-size.

-moz-background-size:  <bg-size>[, <bg-size>]*

Percentages. In this example, you can see the effect of setting a size using percentages. On the left, size is set to auto, which maintains the original size of the background image. In the center, size is set to 100%, which scales the background image to 100% of the area (horizontally), even if the original image was smaller than the background positioning area. On the right, size is set to 10%, which scales the image to 10% of the area. The background image is repeated by default.

css_bgsize_autoto10_fxlogo

 .bg_example_left {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png);
  -moz-background-size: auto;
}
 .bg_example_center {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png);
  -moz-background-size: 100%;
}
 .bg_example_right {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png);
  -moz-background-size: 10%;
}

Here’s the same example (auto – 100% – 10%) using a different background image. In this case, the original is larger than the background area. As a result, specifying “auto” shows only a portion of the original, and you need to set a size of 100% to make the full image visible.

css_bgsize_autoto10_flowers

Horizontal and Vertical Scaling. It it possible to define a size for both horizontal and vertical scaling. Specifying only one size sets horizontal scaling (as in the examples above) and vertical defaults to “auto”. If a second size is specified, it is used for vertical scaling, as in the example below. On the left you can see an image with horizontal scaling of 100% and vertical defaulting to “auto”. On the right, horizontal is set to 100% and vertical is 30%, changing the original appearance of the image because of the change in proportions.

css_bg_size_vert

  -moz-background-size: 100%;
  -moz-background-size: 100% 30%;

Custom Size Demo. Try our interactive demo: select the size of a background on the fly. You’ll need the latest beta of Firefox 3.6.

Multiple Backgrounds

Firefox 3.6 also enables you to stack multiple backgrounds. This allows you to create cool effects by stacking a gradient on top of an image for example.

Defining. To define multiple backgrounds, simply list them as follows, using the background CSS property:

.foo {
  background: background1, background2, ..., backgroundN;
}

The order in which you list the backgrounds matters: the first in the list will appear as the top layer, the last one as the bottom layer.

Setting Properties. For multiple backgrounds, you can set the same properties you would for a single background, such as background-position or background-repeat. Define each background’s behavior by specifying a value for each property. The values need to be listed in the order in which you initially listed the backgrounds.

So if you defined:

  background: background1, background2, background3;

List the values in the same order for each property:

  background-position: background1_position, background2_position, background3_position;
  background-repeat: background1_repeat, background2_repeat, background3_repeat;

Example. Here’s how to stack three different backgrounds: the Firefox logo, a linear gradient, and an image with flowers. If you’re running Firefox 3.6 beta, you can turn on and off any or all of the three backgrounds in our interactive demo.

css_multibg

 .multi_bg_example {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png), -moz-linear-gradient(left, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)), url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: bottom right, left, right;
}

About Alix Franquet

More articles by Alix Franquet…


18 comments

  1. Colby Russell

    The code samples in this article are messed up. How about formatting them for 70 columns (alternatively, 80 columns, and just not using a fixed width for hacks.mozilla.org)?

    December 2nd, 2009 at 13:23

  2. kwinch

    Great. Wait for otherz to implement these.

    December 2nd, 2009 at 14:20

  3. semper

    Thanks a lot, we developers were waiting for this.

    But, as always, a mixed feeling. Dr Jekyll: what an awesome stuff, it really makes css 2 times more powerful! and Mr Hyde: oh yes, go use it in production ;)

    December 3rd, 2009 at 01:26

  4. Jason

    What a neat step forward in extending the power that CSS has. Of course this wouldn’t have any bearing in other browsers, but that’s not the point is it? Why not reward FF users with a UX enhancement? I think it’s about time, and I think I’ll be using this in one way or another in my next project.

    December 3rd, 2009 at 02:51

  5. Neil Rashbrook

    You’re confusing background and background-image again; background is a shorthand property that allows you to specify background-image, background-repeat, background-attachment, background-position and background-color in one convenient rule; convenient that is if you want to use the default values for all the above properties that you don’t specify, plus the -moz-background- extensions clip origin, and size. So for instance your -moz-background-size examples should simply use background-image, while your multiple background example could be written like this (obtained by asking Gecko for the canonical serialisation of your style rule):

    .multi_bg_example {
    background: url(“http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png”) no-repeat scroll right bottom, -moz-linear-gradient(left center , rgba(255, 255, 255, 0), rgb(255, 255, 255)) no-repeat scroll left center, url(“http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg”) repeat scroll right center transparent;
    }

    although you could shorten it by omitting the defaults (which are repeat scroll center transparent):

    .multi_bg_example {
    background: url(“http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png”) no-repeat scroll right bottom, -moz-linear-gradient(left center , rgba(255, 255, 255, 0), rgb(255, 255, 255)) no-repeat left, url(“http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg”) right;
    }

    December 3rd, 2009 at 03:23

  6. […] css backgrounds in Firefox 3.6 at hacks.mozilla.org […]

    December 3rd, 2009 at 16:02

  7. David Hammond

    “In Firefox 3.6, you can specify the size of a background image to scale it as a percentage of the original image”

    The percentage value expresses a percentage of the element’s size, not a percentage of the original image.

    December 3rd, 2009 at 16:38

  8. Dave

    Guys, I love you so much for that implementation!

    December 24th, 2009 at 07:48

  9. Ant

    The only bad thing, is that there is no mechanism to target 1st, 2nd, 3rd or 4th background separately.

    If you want to change only one of them, you should type them all.

    January 16th, 2010 at 09:08

  10. […] A -moz-element() image works just like a normal url() image. That means it’s subject to all the familiar background properties like background-position, background-repeat, and even background-size. […]

    August 24th, 2010 at 13:44

  11. sammy doddy

    i dont get it

    October 26th, 2010 at 16:06

  12. sammy doddy

    how do u get backgrounds

    October 26th, 2010 at 16:08

  13. Viktor

    -moz-background-size is not work on FireFox 5, why?

    August 13th, 2011 at 02:00

    1. louisremi

      It has been depreciated in favor of the non prefixed version: background-size

      August 13th, 2011 at 12:07

  14. […] http://hacks.mozilla.org/2009/12/css-backgrounds-firefox-36/ […]

    August 19th, 2011 at 13:37

  15. […] http://hacks.mozilla.org/2009/12/css-backgrounds-firefox-36/ […]

    August 20th, 2011 at 03:03

  16. Amit

    I have a png image dat is repeated in y direction.But when i increase the width it retains its original image.I have this problem in mozilla.My version is 11.In chrome its working fine.Need opinion on what to do

    April 20th, 2012 at 11:15

  17. daep996

    funciona perfectamente, gracias. (work perfectly, thanks)

    March 9th, 2013 at 16:35

Comments are closed for this article.