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>
Related
I have 2 divs 50% width each. There is a huge header h1 which should have the color of these two divs. I have tried mix-blend-mode but it gives me some random colors when set to difference. My goal is to invert the colors but to keep the colors of the divs. This is a codepen file, I have tried to keep it as simple as possible: https://codepen.io/lukagurovic/pen/MLoZmj
The final effect is supposed to look like on in this example:
https://jsfiddle.net/1uubdtz6/
but I am not sure why doesn't it work with these colors.
Also, these divs are interactive so the color has to change dynamicly as divs are increasing in width when hovered, and there should be only stroke of text without any fill
body {
height: 100vh;
width: 100%;
position: relative;
background-color: #510035;
margin: 0 auto;
}
h1 {
font-size: 4.7em;
text-transform: uppercase;
}
.half-pager {
width: 50%;
height: 100%;
position: absolute;
display: inline-block;
overflow: hidden;
text-align: center;
}
.half-pager-dark {
background-color: #510035;
}
.half-pager-light {
right: 0;
background-color: #E8E8E8;
float: right;
}
.lp-header {
position: absolute;
}
.lp-header {
color:transparent;
mix-blend-mode: difference;
-webkit-text-stroke: 3px rgb(126, 124, 133);
z-index: 1;
}
.lp-header {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="box" class="half-pager half-pager-dark"></div>
<div id="box1" class="half-pager half-pager-light"></div>
<h1 class="lp-header">left or right</h1>
One idea is to duplicate the text and use CSS variable to define the color so you can easily change them in one place. I used clip-path to hide half of one text and show the other half:
body {
margin: 0;
--c1:#510035;
--c2:#E8E8E8;
}
body:hover {
--c1:red;
--c2:blue;
}
h1 {
font-size: 4.7em;
text-transform: uppercase;
margin: 0;
}
.first {
background:var(--c1);
-webkit-text-stroke: 3px var(--c2);
}
.second {
background:var(--c2);
-webkit-text-stroke: 3px var(--c1);
clip-path:polygon(0% 0%, 50% 0%, 50% 100%,0% 100%);
}
.lp-header {
position:absolute;
top:0;
left:0;
right:0;
min-height:100vh;
box-sizing:border-box;
color: transparent;
z-index: 1;
padding: 50px;
text-align: center;
transition:0.5s;
}
<h1 class="lp-header first">left or right</h1>
<h1 class="lp-header second">left or right</h1>
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">
I need to add a transparent coloured layer over a background image. I tried doing this with rgba but with no result.
What I get now is:
page-heading {
background: rgba(36, 70, 105, 0.74) url("../images/samples/bg3.jpg") no-repeat fixed 50% 0px / cover;
opacity: 0.9;
position: relative;
text-align: center;
padding: 72px 0px;
}
I know that the background color is a fallback for when the image cannot be loaded. How do I add a layer over it in a correct way?
Use a simple box-shadow inset:
.page-heading {
background: url(../images/samples/bg3.jpg) no-repeat fixed 50% 0px / cover;
box-shadow: inset 0 0 0 100px rgba(36, 70, 105, 0.74);
}
JS Fiddle: http://jsfiddle.net/ghorg12110/q0cLf2s7/
I see that a lot of people here create an extra element or pseudo elements, but you don't need two elements to create this effect. You can simply declare two background-images. One of which is the original image, and the other a linear gradient. See this Fiddle to see the effect working.
background-image: linear-gradient(rgba(36,70,105,.74), rgba(36,70,105,.74)),
url("https://dummyimage.com/1000x1000/3/f.png&text=Background-image");
Note that you first have to declare the gradient and then the image (I always get this wrong the first time I try to make this)
You can do this with a gradient like the fiddle below.
The left is the original image. The right is the one with the gradient applied.
.block {
width: 300px;
height: 300px;
display: inline-block;
}
.og {
background: url(http://placehold.it/300x300);
}
.ed {
background: linear-gradient(rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.2)), url(http://placehold.it/300x300);
}
<div class="block og"></div>
<div class="block ed"></div>
Use a pseudo element...
.page-heading {
background: url("http://lorempixel.com/400/200") no-repeat fixed 50% 0px / cover;
opacity: 0.9;
position: relative;
text-align: center;
padding: 72px 0px;
}
.page-heading:before {
content: "";
background: rgba(36, 70, 105, 0.74);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="page-heading">
</div>
You can use a pseudo-element to place over your . This way you won't use an extra DOM element.
.element {
background: url('http://lorempixel.com/500/500/');
height: 500px;
width: 500px;
position: relative;
}
.element:after {
background: rgba(0,0,0,0.8);
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
JSFiddle here: http://jsfiddle.net/volzy/LLfhm0kc/1/
body{
background-color: #ccc;
margin:0px;
}
.page-heading {
background: rgba(36, 70, 105, 0.74);
opacity: 0.4;
margin: 0;
position: relative;
width:100%;
height:100vh;
text-align: center;
padding: 72px 0px;
}
I use body but the element could be something else
Hi, here a fiddle :
http://jsfiddle.net/5f46znzx/
is what you are looking for?
remember that opacity trasform each element with the opacity set.
i suggest to eliminate it if you dont need that internal element takes opacity.
You need another box above the header. Imagine that's your HTML:
<div class="page-heading">
<div class="page-heading-fake">
</div>
</div>
You can have this CSS
.page-heading {
background: url(yourimg.png);
position: relative; /* neccesary to make an anchor in the fake */
}
.page-heading-fake {
position: absolute;
top: 0;
left: 0;
background-color: rgba(36, 70, 105, 0.74) ;
}
It's it possible today to do a transparent color overlay process on a single div? for example if I have the following HTML code
<div class="flower">
</div>
and I have the following html...
.flower {
width:320px;
height:240px;
background: url(img/flower.png) no-repeat;
border:5px solid #000000;
}
.flower:after {
background:#FF2400; opacity:0;
}
.flower:after:hover {
opacity:0.7;
}
So when someone hovers over this, they see a tinted red flower. Can we do something like this today with a single div?
There are at least 2 methods of doing this.
Method 1.
Overlay the whole div.
NB.This will also affect any content that may be inside the div.
.box {
width: 200px;
height: 200px;
margin: 25px;
display: inline-block;
}
.overlay {
position: relative;
background: url(http://lorempixel.com/output/nature-q-c-200-200-4.jpg);
}
.overlay:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 0, 0, 1);
opacity: 0;
}
.overlay:hover:after {
opacity: .5;
}
<div class="box overlay">
</div>
Method 2.
Since you are using a background image, we can add another background image on top of the first by way of a linear gradient with a single color and RGBA properties.
.box {
width: 200px;
height: 200px;
margin: 25px;
display: inline-block;
}
.bgimage {
background: url(http://lorempixel.com/output/nature-q-c-200-200-3.jpg);
}
.bgimage:hover {
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5)), url(http://lorempixel.com/output/nature-q-c-200-200-3.jpg);
}
<div class="box bgimage">
</div>
This has the advantage of not affecting the content of the div.
I'm sure there are other methods but these are the first two that came to mind.
Is it possible to make only part of div transparent like an amount of space in div.
For example, you select 100px from top of div and the top 100px have an opacity set?
How would I do it?
You can do a couple of things:
Try a background image where half is transparent and the other half is not.
Use a CSS gradient in such a way that half is transparent and the other is not. Ex:
background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 50%, rgba(34,125,203,1) 52%, rgba(125,185,232,1) 100%); /* FF3.6+ */
Use multiple divs where one has transparent BG and the other does not. Ex:
<div>
<div id="transparent" style="background: transparent"></div>
<div id="not-transparent" style="background: #000"></div>
</div>
I'm sure there are other ways, but those are the first three that come to mind.
Good luck.
Either you create the right background-image using a semi-transparent PNG (transparent at top, opaque at bottom for example) ; either you use two sub-divs, each having its own background-color (one of which with rgba for the transparent part).
You can use css3 properties along with pseudo elements to create this effect:
The trick is to draw a box with :before or :after pseudo element. We can apply background property for inner semi-transparent background. While for outer background we can use a large box-shadow value.
HTML:
<div class="box"></div>
CSS:
.box {
position: relative;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
html,
body {
height: 100%;
}
body {
background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
margin: 0;
}
.box {
position: relative;
margin: 30px 20px;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
<div class="box"></div>