Why can t I use background image and color together

Question

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

User · Answer

Hello everyone I tried another way to combine background-image and background-color together:

HTML

<article><canvas id="color"></canvas></article>

CSS

article {
  height: 490px;
  background: url("Your IMAGE") no-repeat center cover;
  opacity:1;
} 

canvas{
  width: 100%; 
  height: 490px; 
  opacity: 0.9;
}

JAVASCRIPT

window.onload = init();

var canvas, ctx;

function init(){
  canvas = document.getElementeById('color'); 
  ctx = canvas.getContext('2d'); 
  ctx.save();  
  ctx.fillstyle = '#00833d'; 
  ctx.fillRect(0,0,490,490);ctx.restore();
}

Please let me know if it worked for you Thanks

User · Answer

Actually there is a way you can use a background color with a background image  In this case  the background part will be filled with that specified color instead of a white transparent one   In order to achieve that  you need to set the background property like this    bg-image-with-color       background  url  example png   no-repeat   ff0000      Note the comma and the color code after no-repeat  this sets the background color you wish   I discovered this in this YouTube video  however I m not affiliated with that channel or video in any means

User · Answer

use   background red url    images samle jpg  no-repeat left top

User · Answer

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

User · Answer

Make half of the image transparent so the background colour is seen through it   Else simply add another div taking up 50  up the container div and float it either left or right  Then apply either the image or the colour to it

User · Answer

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

User · Answer

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

User · Answer

Gecko has a weird bug where setting the background-color for the html selector will cover up the background-image of the body element even though the body element in effect has a greater z-index and you should be able to see the body s background-image along with the html background-color based purely on simple logic   Gecko Bug  Avoid the following     html  background-color   fff   body  background-image  url example png      Work Around  body  background-color   fff  background-image  url example png

User · Answer

background url directoryName imageName extention  bottom left no-repeat   background-color  red

User · Answer

Here s an example of using background-image and background-color together    x000D   x000D   box   x000D    background-image  repeating-linear-gradient  -45deg  rgba 255  255  255   2   rgba 255  255  255   2  15px  transparent 15px  transparent 30px   x000D    width  100px  x000D    height  100px  x000D    margin  10px 0 0 10px  x000D    display  inline-block  x000D    x000D   lt div class  box  style  background-color orange  gt  lt  div gt  x000D   lt div class  box  style  background-color green  gt  lt  div gt  x000D   lt div class  box  style  background-color blue  gt  lt  div gt  x000D   x000D   x000D

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

Examples related to css