2

I have several containers with multiple background images specified for each of them and separated by comma, where one of the background images is the same for every container.

.foo_1 {
  background-image: url(../img/01.png), url(../img/photo1.jpg);
}
.foo_2 {
  background-image: url(../img/01.png), url(../img/photo2.jpg);
}
.foo_3 {
  background-image: url(../img/01.png), url(../img/photo3.jpg);
}

.foo_1, .foo_2, .foo_3 {
  background-position: top left, center center;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

Is there any way to avoid repeating the image which is used in each class, while still keeping the structure of a background image and allowing for the same manipulation as of a normal background-image property ?

sdvnksv
  • 9,350
  • 18
  • 56
  • 108

2 Answers2

3

Unfortunately, due to how the cascade works, it is not possible to specify multiple background layers in different rulesets without redeclaring the same background layer in each ruleset. See my answer to this related question for details:

A comma-separated list of background layers counts as a single value for the purposes of the cascade, which is why your second background declaration completely overrides the first.

While background is a shorthand for several other properties, it is not a shorthand for individual background layers, as they do not have their own properties. Since individual layer properties don't exist, you cannot use the cascade to override only certain layers while keeping the rest.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
-4

you can user repeat-x or repeat property.

but first of all you have need using Photoshop make there different images for each container :

1. first_img.jpg ( img1.jpg + imga.jpg)

1. second_img.jpg ( img1.jpg + imgb.jpg)

3. third_img.jpg ( img1.jpg + imgc.jpg)


.foo_1 {
  background: url(../first_img.jpg) repeat-x or repeat ;
}
.foo_2 {
  background: url(../second_img.jpg) repeat-x or repeat ;
}
.foo3 {
  background: url(../third_img.jpg) repeat-x or repeat ;
}

Thanks.
user3577900
  • 22
  • 3