All geek questions in one place

Multiple classes with multiple images

I am trying to do something like this:

.box { background-image: url(../img/box.png); background-position: 0 0; background-repeat: no-repeat; display: block; height: 64px; margin: 90px auto; overflow: hidden; width: 831px; } .shadow_1 { background-image: url(../img/shadow_1.png); background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 31px; }

And in HTML:

 <div class="box shadow_1"></div>

I would like to combine two classes with two different images, but the second class overrides the first one. Is this possible, or do I need to use two divs ?

+4
source share
2 answers

Newly loaded styles will overwrite previously loaded styles. So in your case. Any styles in .box will be overwritten with the .shadow_1 style in your implementation.

You are right in assuming that you will need another div to handle this.

+2
source

I assume that you want to have multiple background images on the same element. This is possible and supported in all recent versions of the browser, although if you want to support IE8 before, you need to use multiple divs.

  .box { background-image: url(../img/box.png), url(../img/shadow_1.png); background-position: 0 0, 0 100%; background-repeat: no-repeat, no-repeat; display: block; height: 64px; margin: 90px auto; overflow: hidden; width: 831px; padding-bottom: 31px; }
0
source

Source: https://habr.com/ru/post/1447562/

More articles:


All Articles