Adding background color behind an image

HTML & CSS
1

I can’t figure this out.

This way works:

background: #000000 url("https://i.imgur.com/fOfpsiC.png") no-repeat 0 0;

But this way doesn’t

.wrapa,
.wrapc,
.wrapd,
.wrapf
  {
  background: #000000;
}

https://i.imgur.com/Q4HTwJ7.png

2

If you use the shorthand declaration of background, it assumes you have given all the relevant background information, and overrides any earlier declarations for that property.

Change

.wrapa,
.wrapc,
.wrapd,
.wrapf
  {
  background: #000000;
}

to

.wrapa,
.wrapc,
.wrapd,
.wrapf
  {
  background-color: #000000;
}

That will ensure your rule only targets the color and not override any background image.

4 Likes
4

Thank you.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.