CODEWITHSUNDEEP
cssbackgroundbackground-imagebackground-color
mkn
mkn

Reputation: 13081

CSS: background image on background color

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?

Upvotes: 237

Views: 798986

Answers (13)

Sandeep Sherpur
Sandeep Sherpur

Reputation: 2802

You can try with box shadow: inset

.second_info_block {
  background: url('imageURL');
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
}

Upvotes: 0

Nux
Nux

Reputation: 10012

Assuming you want an icon on the right (or left) then this should work best:

.show-hide-button::after {
    content:"";
    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);
}

Upvotes: 1

ame
ame

Reputation: 851

The next syntax can be used as well.

background: <background-color> 
            url('../assets/icons/my-icon.svg')
            <background-position-x background-position-y>
            <background-repeat>;

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;

Upvotes: 8

dodger
dodger

Reputation: 4955

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;

Upvotes: 431

Fern&#225;n Garc&#237;a de Z&#250;&#241;iga
Fern&#225;n Garc&#237;a de Z&#250;&#241;iga

Reputation: 165

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');
}

Upvotes: 1

Da Beginer
Da Beginer

Reputation: 88

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.

  <style>
    .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;
    }
  </style>

  <span class="btn thumb-up">Thumb up</span>
  <span class="btn thumb-down">Thumb down</span>

Upvotes: 1

Risa__B
Risa__B

Reputation: 462

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");

Upvotes: 23

Luki B. Subekti
Luki B. Subekti

Reputation: 911

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.

Upvotes: 37

alpc
alpc

Reputation: 610

<li style="background-color: #ffffff;"><a href="/<%=logo_marka_url%>"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></a></li>

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

Upvotes: -1

Kesar Sisodiya
Kesar Sisodiya

Reputation: 1624

You can also use short trick to use image and color both like this :-

body {
     background:#000 url('images/checked.png');
 }

Upvotes: 7

Francisc Aknai
Francisc Aknai

Reputation: 489

For me this solution didn't work out:

background-color: #6DB3F2;
background-image: url('images/checked.png');

But instead it worked the other way:

<div class="block">
<span>
...
</span>
</div>

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%;
}

Upvotes: 48

Vikash pathak
Vikash pathak

Reputation: 67

body 
{
background-image:url('image/img2.jpg');
margin: 0px;
 padding: 0px;
}

Upvotes: -11

Ramzi Khahil
Ramzi Khahil

Reputation: 5052

really interesting problem, haven't seen it yet. this code works fine for me. tested it in chrome and IE9

<html>
<head>
<style>
body{
    background-image: url('img.jpg');
    background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>

Upvotes: 4

Related Questions