Why Can't I Use Background Image and Color Together

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.

Can we still use background-image and background-color together?

By default the background color is behind the background image, so if you specify one background, with a color and an image, the color will be invisible behind the image.

However, you can specify multiple backgrounds, each with their own properties. So one background can have an image, while another can have a color. And then the colored background can be over the image..

This is explained in detail in
https://css-tricks.com/tinted-images-multiple-backgrounds/

The trick is to specify a semi-transparent colored background, and a separate image background. You can specify them comma separated. In the code below, the first background is semi-transparent background. A normal rgba() color cannot be used as a background, but you can fake it by defining a linear gradient with two times the same color. The color values are the decimal RGB values for your color, and the fourth parameter specified an opacity of 50%.
The second background is the image itself.

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

In a full code sample it would look like this. Note that I've changes the url and skipped the other image properties.

.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>

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;

Use background image and color for the same element

Your CSS is working correctly, both the image and background colour sit within the one container so because they're the same colour, you can't actually see the arrow.

The best way to solve this is to use an outer div that wraps your header element, like so:

<div class="outer"><h1></h1></div>

And then style with appropriate CSS:

div {
   float: right;
   width: 198px;
   background-image:url(http://s14.postimage.org/nitv9x7ct/top_Arrow.png);        
   background-position: 0px;
   background-repeat: no-repeat;
   margin-top:21px;
}

h1{
    color:white;
    font-size: 170%;
    font-weight: normal;
    font-family: arial;
    width:189px;
    height:33px;
    line-height: 33px;
    background-color: #b21f23;
    float:right;
}

So to clarify, the outer div is slightly larger and contains the background image aligned to the left and then the header fills all remaining space with the background colour.

How do I combine a background-image and CSS3 gradient on the same element?

Multiple backgrounds!

body {  background: #eb01a5;  background-image: url("IMAGE_URL"); /* fallback */  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */}

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>

Multiple background-images and a background-color

No, it's not exactly lost from the shorthand declaration. You can still specify the background color, but only for the last (middle) layer (regardless of whether you put an image there):

div.arrow {
    background: url('arrowtail.png') left no-repeat, 
                url('arrowhead.png') right no-repeat, 
                red;
}

Note that for your scenario, your images may have to have completely opaque backgrounds. The background color will show under any transparent pixels of your images.

jsFiddle demo

Declaring background-color separately, however, may be much better for your scenario as it lets you use different colors based on the same background images (if you're good with transparent pixels on the parts of your images to be filled with the CSS background color):

div.arrow {
    background: url('arrowtail.png') left no-repeat, 
                url('arrowhead.png') right no-repeat;
}

/* Assuming your red arrow has this ID */
#red {
    background-color: red;
}

jsFiddle demo

Why Can't I Use Background Image and Color Together