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

What I am trying to do is to show both background-color and background-image, so that half of my div will cover the right shadow background image, and the other left part will cover the background color.

But when I use background-image, the color disappears.

Solution 1:

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.

Solution 2:

To tint an image, you can use CSS3 background to stack images and a linear-gradient. In the example below, I use a linear-gradient with no actual gradient. The browser treats gradients as images (I think it actually generates a bitmap and overlays it) and thus, is actually stacking multiple images.

background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;

Will yield a graph-paper with light blue tint, if you had the png. Note that the stacking order might work in reverse to your mental model, with the first item being on top.

Excellent documentation by Mozilla, here:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

Tool for building the gradients:

http://www.colorzilla.com/gradient-editor/

Note - doesn't work in IE11! I'll post an update when I find out why, since its supposed to.

Solution 3:

use

background:red url(../images/samle.jpg) no-repeat left top;

Solution 4:

And to add to this answer, make sure the image itself has a transparent background.