Css: Background Image on Background Color

CSS: background image on background color

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;

Semi-transparent color layer over background-image?

Here it is:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML for this:

<div class="background">
    <div class="layer">
    </div>
</div>

Of course you need to define a width and height to the .background class, if there are no other elements inside of it

Why can't I use background image and color together?

It's perfectly possible to use both a color and an image as background for an element.

You set the background-color and background-image styles. If the image is smaller than the element, you need to use the background-position style to place it to the right, and to keep it from repeating and covering the entire background you use the background-repeat style:

background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;

Or using the composite style background:

background: green url(images/shadow.gif) right no-repeat;

If you use the composite style background to set both separately, only the last one will be used, that's one possible reason why your color is not visible:

background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;

There is no way to specifically limit the background image to cover only part of the element, so you have to make sure that the image is smaller than the element, or that it has any transparent areas, for the background color to be visible.

How to add a color overlay to a background image?

I see 2 easy options:

• multiple background with a translucent single gradient over image
• huge inset shadow

gradient option:

html {
  min-height:100%;
  background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
}

shadow option:

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}

an old codepen of mine with few examples

a third option

• with background-blen-mode :
  
  

  The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2) rgba(255, 0, 150, 0.3);
  background-size:cover;
  background-blend-mode: multiply;
}

background image along with background color problem

Well you can use a background-image and a background-color at the same time. As soon as the background-image is loaded, it will be rendered above the background color. What youc an do, is to place a pseudo-div spanning the entire width and height and use a background-color on this pesudo-div. Be sure to sue a rgba value as otherwise the background will be non-transpaerent and hide the background-image.

However, ther content will be influenced at the same time, so the content has to be pushed to the front (layer-wise) with the use of z-index (e.g..content { z-index: 1; }).

To span the layer with the background-color the entire width, I gave the parent the attribute: position: relative;.
Next I used for the layer position: absolute;. I gave it a top: 0; bottom: 0; left: 0; right: 0; so it will be spanned the entire parents space.

.background {
  width:100%;
  min-height: 500px;
  background: url(https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60), #651fff;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.layer {
  background-color: rgba(255, 0, 0, 0.6);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.content {
  z-index: 1;
}

<div class="background">
  <div class="layer"></div>
  <div class="content">1</div>
</div>

.blue-pattern {
  background: 
    linear-gradient(
      rgba(64, 153, 255, 0.5), 
      rgba(64, 153, 255, 0.5)
    )    
    , url('/your image url');

.blue-pattern {  background:     linear-gradient(      rgba(64, 153, 255, 0.5),       rgba(64, 153, 255, 0.5)    )        ,   url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Portrait_of_Arthur_Conan_Doyle.jpg/460px-Portrait_of_Arthur_Conan_Doyle.jpg');    }
.pad--tiny {  height: 500px; /* for demo */ }

<div class="blue-pattern pad--tiny">    <p class="text--white">Blah blah blah, text and stuff</p>                                   </div>

.wrapper {
  position:relative;
}

.wrapper::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: url(https://i.ibb.co/gD7vNSs/fleur-cerf.png), url(https://i.ibb.co/Nn2Wt9Q/fleur-renard.png);
  background-position: top left, top right;
  background-repeat: repeat-y;
}

.box1 {
  padding: 50px;
  padding-left: 100px;
  background: #f6f7f9;
}

.box2 {
  padding: 50px;
  padding-left: 100px;
  background: #e89d8c;
}
/* to make the content always on the top */
.box1 *,
.box2 * {
  position:relative;
  z-index:2;
}

<div class="wrapper">
  <div class="box1">
    <h1>This is a heading</h1>
    <p>
      This is paragraph
    </p>
  </div>
  <div class="box2">
    <h1>This is a heading</h1>
    <p>
      This is paragraph
    </p>
  </div>
</div>