CSS background image on background color

Question

I have panel which I colored blue if this panel is being selected  clicked on it   Additionally  I add a small sign   png image  to that panel  which indicates that the selected panel has been already selected before   So if the user sees for example 10 panels and 4 of them have this small sign  he knows that he has already clicked on those panels before  This work fine so far  The problem is now that I can t display the small sign and make the panel blue at the same time   I set the panel to blue with the css background   6DB3F2  and the background image with background-image  url  images checked png    But it seems that the background color is above the image so you cannot see the sign   Is it therefore possible to set z-indexes for the background color and the background image

User · Answer

The next syntax can be used as well  background   lt background-color gt               url     assets icons my-icon svg                lt background-position-x background-position-y gt               lt background-repeat gt    It allows you combining background-color  background-image  background-position and background-repeat properties  Example background   696969 url     assets icons my-icon svg   center center no-repeat

User · Answer

Here is how I styled my colored buttons with an icon in the background  I used  background-color  property for the color and  background  property for the image      lt style gt       btn         display  inline-block        line-height  1em        padding   1em  3em  15em 2em       border-radius   2em        border  1px solid  d8d8d8         background-color   cccccc              thumb-up         background  url   icons thumb-up png   no-repeat 3px center              thumb-down         background  url   icons thumb-down png   no-repeat 3px center           lt  style gt      lt span class  btn thumb-up  gt Thumb up lt  span gt     lt span class  btn thumb-down  gt Thumb down lt  span gt

User · Answer

You can also use short trick to use image and color both like this  -  body        background  000 url  images checked png

User · Answer

Assuming you want an icon on the right  or left  then this should work best   show-hide-button  after       content  quot  quot       background-repeat  no-repeat      background-size  contain      display  inline-block      background-size  1em      width  1em      height  1em      background-position  0 2px      margin-left   5em     show-hide-button shown  after       background-image  url img eye svg      You could also do background-size  contain   but that should be mostly the same  the background-position will depened on your image  Then you can easily do an alternative state on hover   show-hide-button shown hover  after       background-image  url img eye-no svg

User · Answer

lt li style  background-color   ffffff   gt  lt a href    lt   logo marka url  gt   gt  lt img border  0  style  border-radius 5px background  url images picture jpg   50  50  no-repeat width 150px height 80px   src  images clearpixel gif   gt  lt  a gt  lt  li gt   Other Sample Box Center Image and  Background Color   1 First clearpixel fix image area 2 style center image area box 3 li background or div color style

User · Answer

You need to use the full property name for each   background-color   6DB3F2  background-image  url  images checked png      Or  you can use the background shorthand and specify it all in one line   background  url  images checked png     6DB3F2

User · Answer

Based on MDN Web Docs you can set multiple background using shorthand background property or individual properties except for background-color  In your case  you can do a trick using linear-gradient like this   background-image  url  images checked png    linear-gradient to right   6DB3F2   6DB3F2     The first item  image  in the parameter will be put on top  The second item  color background  will be put underneath the first  You can also set other properties individually  For example  to set the image size and position   background-size  30px 30px  background-position  bottom right  background-repeat  no-repeat    Benefit of this method is you can implement it for other cases  easily  for example  you want to make the blue color overlaying the image with certain opacity   background-image  linear-gradient to right  rgba 109  179  242   6   rgba 109  179  242   6    url  images checked png    background-size  cover  contain  background-position  center  right bottom  background-repeat  no-repeat  no-repeat    Individual property parameters are set respectively  Because the image is put underneath the color overlay  its property parameters are also placed after color overlay parameters

User · Answer

This actually works for me   background-color   6DB3F2  background-image  url  images checked png      You can also drop a solid shadow and set the background image   background-image  url  images checked png    box-shadow  inset 0 0 100   6DB3F2    If the first option is not working for some reason and you don t want to use the box shadow you can always use a pseudo element for the image without any extra HTML    btn      position  relative      background-color   6DB3F2     btn before      content          display  block      width  100       height  100       position absolute      top 0      left 0      background-image  url  images checked png

User · Answer

body    background-image url  image img2 jpg    margin  0px   padding  0px

User · Answer

really interesting problem  haven t seen it yet  this code works fine for me  tested it in chrome and IE9   lt html gt   lt head gt   lt style gt  body      background-image  url  img jpg        background-color   6DB3F2     lt  style gt   lt  head gt   lt body gt   lt  body gt   lt  html gt

User · Answer

And if you want Generate a Black Shadow in the background  you can use   the following    background linear-gradient  rgba 0  0  0  0 5  100   rgba 0  0  0  0 5 100   url  logo header-background png

User · Answer

For me this solution didn t work out   background-color   6DB3F2  background-image  url  images checked png      But instead it worked the other way    lt div class  block  gt   lt span gt       lt  span gt   lt  div gt    the css    block    background-image  url  img jpg   no-repeat    position  relative      block  before    background-color  rgba 0  0  0  0 37     content        display  block    height  100     position  absolute    width  100

[css] CSS: background image on background color

The next syntax can be used as well.

Example

Examples related to css

Examples related to background

Examples related to background-image

Examples related to background-color