Is it possible to append a CSS3 background with additional classes / styles?

Question

Today I learned CSS3 supports multiple backgrounds, which is awesome. What I'd really like is the ability to combine multiple backgrounds on the fly, EG:

.Watermarked{
  background: url('text/logo.png') bottom right no-repeat;
}

HTML:

<div class="Watermarked" 
     style="background:url('photos/very_pretty_sunset.jpg') 0 0 no-repeat;">
...

Somehow produces the computed style:

 background: url('text/logo.png') bottom right no-repeat,
             url('photos/very_pretty_sunset.jpg') 0 0 no-repeat;

Of course I can hard code the extra background style or add it using jquery. I am seeking that sweet, pure, CSS-only solution.

Answered

Accepted thirtydot for the pure CSS answer- "You can't".

It's worth highlighting that if you're working with SASS (Rails 3.1, etc), the hard-coded styles are more palatable through variable use:

$watermarkImage: url('text/logo.png') left top no-repeat;
...
#very_pretty_sunset{
  background: $watermarkImage, url('photos/very_pretty_sunset.png') right bottom no-repeat;
}

score 5 · Answer 1 · answered Apr 27 '13 at 12:05

5

Pseudo selectors :before or :after can be used to add a new background layer

/* This is your element that needs an additional background */
.myElement {
  position: relative;
  z-index: 1;
}
/* This is your background layer */
.myElement:before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: /* Define your bg */;
}

answered Apr 27 '13 at 12:05

Semra

2,787
28
26

NB that the double colon `::before` is the new standard. – GKFX Apr 12 '17 at 13:04

score 5 · Accepted Answer · answered Jun 21 '11 at 23:05

5

You can't do that with CSS.

Whichever background is declared with higher specificity will completely override the other one.

answered Jun 21 '11 at 23:05

thirtydot

224,678
48
389
349

This is why I hate shorthand properties (which sometimes aren't even shorthand for everything). – BoltClock Jun 21 '11 at 23:08
1

@BoltClock - What does this have to do with shorthand properties? – Shauna Jun 22 '11 at 19:40
2

Huge oversight in CSS language design – jchook Jan 30 '13 at 19:42

Knu · Answer 3 · 2011-06-22T05:09:14.350

PREREQUISITE

width of the div = width of the img - border-image img width
height of the div = height of the img - border-image img height
border-image img height = border-bottom-width
border-image img width = border-right-width
your border image must be transparent (obvious)

CSS

.Watermarked {
    -moz-border-image: url('text/logo.png') 0 100% 100% 0;
    -webkit-border-image: url('text/logo.png') 0 100% 100% 0;
    -o-border-image: url('text/logo.png') 0 100% 100% 0;
    border-image: url('text/logo.png') 0 100% 100% 0;
}

box-sizing alternative

PREREQUISITE

border-bottom-width = logo.png height
border-right-width = logo.png width
your border image must be transparent (optional)

CSS

.Watermarked {
    -moz-border-image: url('text/logo.png') 0 100% 100% 0;
    -webkit-border-image: url('text/logo.png') 0 100% 100% 0;
    -o-border-image: url('text/logo.png') 0 100% 100% 0;
    border-image: url('text/logo.png') 0 100% 100% 0;
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

Is it possible to append a CSS3 background with additional classes / styles?

3 Answers3