Background color multiple css

background

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Using a */ background: green; /* Using a and */ background: url("test.jpg") repeat-y; /* Using a and */ background: border-box red; /* A single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png"); /* Global values */ background: inherit; background: initial; background: revert; background: revert-layer; background: unset; 

The background property is specified as one or more background layers, separated by commas.

The syntax of each layer is as follows:

• Each layer may include zero or one occurrences of any of the following values:
  • The value may only be included immediately after , separated with the ‘/’ character, like this: » center/80% «.
  • The value may be included zero, one, or two times. If included once, it sets both background-origin and background-clip . If it is included twice, the first occurrence sets background-origin , and the second sets background-clip .
  • The value may only be included in the last layer specified.

  Values

  See background-clip and background-origin . Default: border-box and padding-box respectively.

  See background-color . Default: transparent .

  The following three lines of CSS are equivalent:

  background: none; background: transparent; background: repeat scroll 0% 0% / auto padding-box border-box none transparent; 

  Accessibility concerns

  Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page’s overall purpose, it is better to describe it semantically in the document.

  Formal definition

  • background-image : none
  • background-position : 0% 0%
  • background-size : auto auto
  • background-repeat : repeat
  • background-origin : padding-box
  • background-clip : border-box
  • background-attachment : scroll
  • background-color : transparent
  • background-position : refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
  • background-size : relative to the background positioning area
  • background-image : as specified, but with url() values made absolute
  • background-position : as each of the properties of the shorthand:
    • background-position-x : A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
    • background-position-y : A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
    • background-color : a color
    • background-image : discrete
    • background-clip : a repeatable list of
    • background-position : a repeatable list of
    • background-size : a repeatable list of
    • background-repeat : discrete
    • background-attachment : discrete

    Formal syntax

    background =
    [ # , ]?

    =
    ||
    [ / ]? ||
    ||
    ||
    ||
    

    =
    ||
    ||
    [ / ]? ||
    ||
    ||
    ||
    

    =
    |
    none

    =
    [ left | center | right | top | bottom | ] |
    [ left | center | right | ] [ top | center | bottom | ] |
    [ center | [ left | right ] ? ] && [ center | [ top | bottom ] ? ]

    =
    [ | auto ] |
    cover |
    contain

    =
    repeat-x |
    repeat-y |
    [ repeat | space | round | no-repeat ]

    =
    scroll |
    fixed |
    local

    =
    border-box |
    padding-box |
    content-box

    =
    |

    =
    |

    =
    url( * ) |
    src( * )

    Examples

    Setting backgrounds with color keywords and images

    HTML

    p class="topbanner"> Starry skybr /> Twinkle twinklebr /> Starry sky p> p class="warning">Here is a paragraphp> p>p> 

    CSS

    .warning  background: pink; > .topbanner  background: url("starsolid.gif") #99f repeat-y fixed; > 

    Result

    Specifications

    Browser compatibility

    BCD tables only load in the browser

    See also

    Found a content problem with this page?

    This page was last modified on Jul 18, 2023 by MDN contributors.

    Your blueprint for a better internet.

    MDN

    Support

    Our communities

    Developers

    Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
    Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

    Источник

    Tinted Images with Multiple Backgrounds

    The background property in CSS can accept comma separated values. “Multiple” backgrounds, if you will. You can also think of them as layered backgrounds since they have a stacking order. If we layer a transparent color over an image, we can “tint” that image. But it’s not quite as obvious as you might suspect. My first intuitive guess at doing this would be like this:

    /* Warning: this doesn't work */ .tinted-image < background: /* top, transparent red */ rgba(255, 0, 0, 0.25), /* bottom, image */ url(image.jpg); >

    Unfortunately, that’s not valid. I’m not entirely sure why. A while back when I whined on Twitter about it I got a variety of ideas/reasons/excuses. None of them rang quite true for me. It’s true you cannot comma-separate background-color , but I don’t think that’s relevant here as I’m comma separating the background shorthand not specifically background-color (not to mention ordering those values the other way around works fine). I suspect the real reason that was decided is because it would be too easy for authors to screw up. background: green, url(image.jpg); would “fail” in a sense in that it would just flood the background green. Forcing the color to be last makes the color kind of like a “fallback” rather than a layer like any other. Unfortunately we also can’t simply leave the color at the bottom and adjust the opacity of the image to allow some of that color to come through, because background-opacity isn’t a thing. (Although you can kind of fake it.) There is a way though! Instead of using a transparent flood color using rgba() or hsla(), we can use a gradient. Gradients are technically background-image s and thus not subject to the rule where they can’t come first (be top) in the stacking order.

    /* Working method */ .tinted-image < background: /* top, transparent red, faked with gradient */ linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), /* bottom, image */ url(image.jpg); >

    See the Pen Tinted Image w/ Multiple Backgrounds by Chris Coyier (@chriscoyier) on CodePen Hey, whatever works, right?

    Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

    Comments

    On a recent pen of mine (which got featured, thanks guys!) I did a trick of making the full-page background image (using one of your previous posts) partially transparent. This allowed me to change the background colour of the page and give the effect that the image was changing colour. I guess doing that was sort of the reverse of doing what you’ve done above. This is a cool effect though, I’ll remember this for later, thanks Chris.

    This works in most new browsers, but what about IE? Also, how about this? http://codepen.io/NSDCars5/pen/nuzbI

    It works in IE since version 9. For IE 8 and older versions, maybe you can do something with the legacy filter property.

    That technique in your pen has always worked, but it’s relying on markup. You’re just layering elements on top of one another. The technique Chris describes is much more flexible and doesn’t require and change in markup.

    Isn’t it easier to maintain by using a pseudo-element? So it’s not related to the background-image URL. Like this – http://codepen.io/anon/pen/lbfeC

    You know, that pseudo-element thing, I have to research it. I’ve heard about it, but never used it (I’m pretty new to all this HTML+CSS thing)….

    @NSDCars5 I really recommend you look into it. They can help you pull off some really nice tricks without polluting the HTML markup with elements only existing for the purpose of decoration. A good example is “Niet the Dark Absol’s” answer on http://stackoverflow.com/questions/14387690/css-show-only-corner-border

    That’s what I do: Use a pseudo element to add a filter on top of backgrounds/images. Position: absolute with the top, bottom, left, right all set to 0. Then I use rgba to apply the color and transparency.

    This could seems like a good solutions at first but it starts to break down when you actually have anything inside the container. Any ideas on how to make it more flexible? Example

    @Andrew Richardson Oops, my fault. I forgot to add position: relative to the container.
    Set position to relative and the width/height of the pseudo-element to 100%.

    Ahh yeah that makes sense. This may be the most versatile option as you can manipulate just the overlay color in any way you want while retaining the background image. Thanks!

    One could argue that using pseudo elements for decoration is making your CSS less maintainable. You would need to add comments if you’re working on a team. Using multiple background images layered on top of each other is more easy to understand, all in one place and ultimately less CSS to maintain and/or break. Remember, Pseudo elements are still adding elements. It’s just that the browser is creating them. Multiple backgrounds seem like the cleaner solution. In the long term, less code = more maintainable code.

    This method can be easily tweaked for some nice hover effects, too. .red:after <
    background:rgba(25,55,0,0.2);
    transition: background 200ms ease-out;
    > :hover.red:after <
    background:rgba(25,34,23,0.5);
    >

    Using pseudo-elements is certainly clever but completely inaccessible. Once you add content to the element like Andrew Richardson tried, you can’t select it (unless you select everything – CTRL+A). Try selecting the text in your demo with your mouse. Agree with Armstrongest, multiple backgrounds is just a plain cleaner solution.

    The reason your original syntax doesn’t work is, you’re specifying a background-color and a background-image and images will always stack on top of the colour. By defining a linear-gradient with the same start-end stop values your effectively creating an image of a solid colour block which can be drawn on top of the background image. I used this same trick to fake lighting in my CSS 3D demos.

    It’s not the fact that the background is an image or a color, it’s the stacking order. But yep, the gradient trick is exactly what I’ve presented here.

    Quite true: “The background color, if present, is painted below all of the other layers.” (w3c). I wonder how the gradient method compares to generating semi-transparent tinted data-embedded pngs with the framework of choice.

    Reading through the Backgrounds and Borders Module it looks like a background-color is only valid if it’s the last property defined in the shorthand declaration. So it can only ever exist as the bottom “layer” – I guess this is to keep the syntax inline with CSS2, which states “When the image is available, it is rendered on top of the background color”

    I think the reason that you can’t put a background-color on top is that there simply is only one background-color layer, and it’s always on bottom. In other words, background-color does not apply per layer, it applies once for the whole stack. Or, in code: It’s not “background: layer1 color1, layer2 color2, layer3 color3;”, it’s “background: layer1, layer2, layer3 color;”.

    Источник

    Читайте также:  Simple Multiple Choice Quiz with JavaScript