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.
This question is related to
css
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.
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
background:url(directoryName/imageName.extention) bottom left no-repeat;
background-color: red;
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);}
use
background:red url(../images/samle.jpg) no-repeat left top;
Here's an example of using background-image
and background-color
together:
.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_
<div class="box" style="background-color:orange"></div>_x000D_
<div class="box" style="background-color:green"></div>_x000D_
<div class="box" style="background-color:blue"></div>
_x000D_
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.
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.
And to add to this answer, make sure the image itself has a transparent background.
Source: Stackoverflow.com