This question already has answers here:
How to add a color overlay to a background image? [duplicate]
(4 answers)
Closed 3 years ago.
I am able to set a background image that covers a page but the green overlay does not work. What am I doing wrong? Thank you.
body {
margin: 0 auto;
padding: 0;
background: url("../images/worldmap.jpg") no-repeat rgba(0,255,0,.5);
/*background-image: url("../images/worldmap.jpg");*/
/*background-repeat: no-repeat;*/
}
you may try this...
body {
margin: 0 auto;
padding: 0;
background-size:cover;
background:linear-gradient(0deg,rgba(0,255,0,.5);,rgba(0,255,0,.5);),url("../images/worldmap.jpg");
}
Try this
.overlay-image {
width: 300px;
height: 200px;
background: linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)), url(https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg);
}
<div class="overlay-image"></div>
I solved it by adding the url for the background image at the end of the line.
.page{
background: -moz-linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
background: -webkit-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
background: -webkit-linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
background: -o-linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
background: -ms-linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
background: linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
margin: 0 auto;
padding: 0;
}
Related
My webpage (a web im doing to learn) have the background splitted in two parts.
Here is the css code
body {
background: #466368;
background: -webkit-linear-gradient(#648880, #293f50);
background: -moz-linear-gradient(#648880, #293f50);
background: linear-gradient(#648880, #293f50);
}
your background is repeating due to the height of the body try this:
body {
background: #466368 no-repeat center center fixed;
background: -webkit-linear-gradient(#648880, #293f50) no-repeat center center fixed;
background: -moz-linear-gradient(#648880, #293f50) no-repeat center center fixed;
background: linear-gradient(#648880, #293f50) no-repeat center center fixed;
}
i solve the problem
body{
background: #466368;
background: -webkit-linear-gradient(#648880, #293f50);
background: -moz-linear-gradient(#648880, #293f50);
background: linear-gradient(#648880, #293f50);
margin: 0px;
height: 100%;
min-height: 100%;
}
html{
margin: 0px;
height: 100%;
}
This question already has answers here:
Set size on background image with CSS?
(18 answers)
Closed 6 years ago.
I've tried to look at other answers but no help. My background is dynamic so the size of images will change, so I need to keep aspect ratio so the whole image is seen. here's my CSS:
.image_submit_div {
border: 1px solid #ccc;
display: inline-block;
padding: 20px 50px;
width: 55%;
height: 320px;
cursor: pointer;
background: url('something.jpg'); /* this changes */
margin: 0 0 25px;
}
html
<label for="id_image" class="image_submit_div">
At the moment depending on the image, sometimes alot of it is cut off. I want the image to be downsized so it can be seen fully. Any idea?
Use background-size: cover; to cover the entire element, while maintaining the aspect ratio:
.background-1,
.background-2,
.background-3 {
/* Set the background image, size, and position. */
background-image: url('//via.placeholder.com/350x150');
background-size: cover;
background-position: center;
/* Or, use the background shortcut. */
background: url('//via.placeholder.com/350x150') center/cover;
margin: 20px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.background-1 {
width: 300px;
height: 200px;
}
.background-2 {
width: 200px;
height: 50px;
}
.background-3 {
width: 100px;
height: 200px;
}
<div class="background-1"></div>
<div class="background-2"></div>
<div class="background-3"></div>
If you want to display the entire image, while maintaining the aspect ratio, use background-size: contain; instead:
.background-1,
.background-2,
.background-3 {
/* Set the background image, size, position, repeat, and color. */
background-image: url('//via.placeholder.com/350x150');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: #fbfbfb;
/* Or, use the background shortcut. */
background: #fbfbfb url('//via.placeholder.com/350x150') no-repeat center/contain;
margin: 20px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.background-1 {
width: 300px;
height: 200px;
}
.background-2 {
width: 200px;
height: 50px;
}
.background-3 {
width: 100px;
height: 200px;
}
<div class="background-1"></div>
<div class="background-2"></div>
<div class="background-3"></div>
Use background-size:contain; if you want to see the whole image and stretch it to the full width or height (depends on the aspect ratio of the image) of the div.
But if you want to cover the whole div with the background-image and don't mind the image getting cropped then use background-size:cover; instead.
.image_submit_div {
border: 1px solid #ccc;
display: inline-block;
padding: 20px 50px;
width: 55%;
height: 320px;
cursor: pointer;
background: url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg'); /* this changes */
margin: 0 0 25px;
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
<label for="id_image" class="image_submit_div">
Currently I have markup for a dotted border line since border is pretty crappy when it comes to making actual dotted borders. my markup is the following
.dotted-line {
background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%);
background-repeat: repeat-x;
background-size: 6px 2px;
height: 9px;
width:100%;
margin: 20px 0 0 0;
}
<div class="dotted-line"></div>
However the problem I am having is I want to be able to make the same sort of border but vertical instead of horizontal. I have set background-repeat: repeat-x; but then I just get one solid line. Is it possible to do a vertical radial-gradient?
I played around with your horizontal border and got this vertical dotted border. Take a look at background-repeat: repeat-y;, it's now vertical and the background-size has also changed.
I changed the width and height to get a decent amount of space to play in.
.dotted-line {
background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%);
background-repeat: repeat-y;
background-size: 2px 6px;
height: 100px;
width: 9px;
margin: 20px 0 0 0;
}
<div class="dotted-line"></div>
Like this ? You forgot to change the dimension. Sorry if that's not what you asked.
.dotted-line {
background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%);
background-repeat: repeat-y;
background-size: 2px 6px;
height: 100vh;
width:10px;
margin: 20px 0 0 0;
}
<div class="dotted-line"></div>
I have found an image that I want to colour. Can I change the colour of the image without having to edit it in an application such as Photoshop. For example.
background-image: url('texture.png');
background-color: blue;
And then use this for multiple sections but changing the colour each time?
Just wondering if this is possible and if somebody can tell me how to do it.
A couple of options (or three).
Background Image with Overlay gradient
div {
height: 100px;
margin: 1em auto;
color: white;
}
.bg-gradient {
background: linear-gradient(to bottom, rgba(255, 0, 0, 0.25), rgba(255, 0, 0, 0.25)), url(https://wallpaperscraft.com/image/patterns_wavy_background_texture_metal_silver_18405_1920x1080.jpg);
background-size: 100% auto;
}
<div class="bg-gradient"></div>
Pseudo-element with bg image and CSS filters
MDN Reference
div {
height: 100px;
margin: 10px auto;
color:white;
}
.pseudo {
position: relative;
background: #000;
}
.pseudo:before {
content: '';
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
background:url(https://wallpaperscraft.com/image/patterns_wavy_background_texture_metal_silver_18405_1920x1080.jpg);
background-size: 100% auto;
}
.pseudo.blue {
-webkit-filter:sepia(1) hue-rotate(90deg);
filter:sepia(1) hue-rotate(90deg);
}
.pseudo.purple {
-webkit-filter:sepia(1) hue-rotate(270deg);
filter:sepia(1) hue-rotate(270deg);
}
<div class="pseudo blue">Text</div>
<div class="pseudo purple">Text</div>
Background Blend Mode
MDN Reference
div {
height: 100px;
margin: 1em auto;
color: white;
}
.blend {
background-image: url(https://wallpaperscraft.com/image/patterns_wavy_background_texture_metal_silver_18405_1920x1080.jpg);
background-color: #663399;
background-blend-mode: multiply;
background-size: 100% auto;
}
<div class="blend"></div>
I have an image which covers an entire element using something like #myDiv {background-image: url("../images/background.jpg "); background-repeat: no-repeat; background-size: cover; background-position: center;}
Next, I would like to gray out the left side of the image similar to that shown below.
How can this be accomplished? It doesn't need to look exactly the same, but only similar.
You may use linear-gradients since you use background-image
html {
min-height: 100%;
background:
linear-gradient(to right, rgba(0, 0, 0, 0.75) 60px, transparent 60px), /* the gray, reset opacity to your needs : here 0.75 */
linear-gradient(to right, transparent 60px, red 60px, red 64px, transparent 64px), /* a red line ? */
url(http://lorempixel.com/200/200/fashion) /* and finally, image laying underneath gradients */;
background-size:
auto,
auto,
auto 100%;
}
you could play with a pseudoelement and a RGBA background, e.g.
#mydiv {
background: url(http://www.psdgraphics.com/file/cherry-wood.jpg);
width: 250px;
height: 400px;
position: relative;
}
#mydiv:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 30%;
background: rgba(255,255,255, .3);
}
Codepen: http://codepen.io/anon/pen/OyVYwe
Or you could simply add a transparent left border to the element, e.g.
box-sizing: border-box;
background-origin: border-box;
border-left: 50px rgba(255,255,255, .3) solid;
Codepen: http://codepen.io/anon/pen/ZbGNqL
Or you could use an inset box-shadow
box-shadow: 80px 0 0 0px rgba(255, 255, 255, .2) inset;
Codepen: http://codepen.io/anon/pen/avOrXE
Please do not vote for this answer as it was user3791372's comment (yet not yet an answer) and not mine. If you think it is the right approach, please provide a comment why you think so.
http://codepen.io/anon/pen/MaaWMB
<div id="mydiv">
<div id="sidebar"></div>
</div>
#mydiv {
background: url(http://www.psdgraphics.com/file/cherry-wood.jpg) bottom;
width: 230px;
height: 400px;
}
#sidebar {
background-color: white;
opacity: 0.2;
filter: alpha(opacity=20);
width: 50px;
height: 100%;
}