Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 months ago.
Improve this question
https://i.stack.imgur.com/Qc846.png
I need to figure how I can do something like this in css
I tried to use backdrop filter, inset shadow but it didn't work , any help?
Use linear-gradient() as a background-image to apply an overlay over an image:
div {
background-image:
linear-gradient(to right, #111 40%, transparent 80%), /* This is the overlay, adjust as needed. */
url(https://picsum.photos/400/200);
width: 400px;
height: 200px;
}
<div></div>
If you'd like to reuse the gradient, bind it to a separate class-name and it's pseudo-element. E.g.:
.with-gradient:after
{
position: absolute;
inset:0;
content: ' ';
display: block;
background: linear-gradient(to right, #111 40%, transparent 80%)
}
You can use one of the two ways to get a shadow effect.
<style>
/* *{
background: rgba(0,0,0,0.7)url('architecture.jpg');
background-size: cover;
background-blend-mode:darken;
} */
/* OR */
.bg{
background-image:linear-gradient(to right, rgba(17, 17, 17, 0.925) 40%, transparent 80%),url(architecture.jpg);
width: 98%;
height: 600px;
}
</style>
Related
This question already has answers here:
How to remove the stripes that appears when using linear gradient property [duplicate]
(2 answers)
Closed 2 months ago.
I'm currently building a login page to my website and it has a linear gradient as the background. But the linear gradient is repeating.
Here's my CSS:
body {
background-image: linear-gradient(to bottom, white, grey);
height: 400%;
width: 400%;
}
How am I supposed to prevent this from happening?
Use the background-repeat property with a value of none.
html {
min-height: 100%;
}
body {
background-image: linear-gradient(to bottom, white, grey);
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
This question already has answers here:
How to make half-square background in css
(3 answers)
Closed 4 years ago.
I'm trying to make a second background which should go from one edge to another edge. So in my example: The red BG should go from the top right, to the bottom left.
The question for me is, how would you/can i do this also for the Responsive view? So if i resize the window, the edges of the red background won't fit the actual edge anymore. Is this even possible with CSS, that the edges will always fit? I'm stuck at this point regarding the Responsive trick .. :)
Because if the screen is smaller you would have to adjust the 120deg, don't you? Media Queries are not really an option, because those are only working with Breakpoints. But it should work with every resized pixel.
Here's my example:
.background {
width: 100%;
max-width: 700px;
height: 300px;
background: gray;
position: relative;
}
.background:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: linear-gradient(120deg, #cf0529 50%, transparent 50%);
}
<div class="background"></div>
See this reference here:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
The gradient you want would be:
background: linear-gradient(to bottom left, #cf0529 50%, transparent 50%);
I'm trying to use this code in a CSS stylesheet:
.layered-image {
background: linear-gradient( to right, transparent, white 40% ),
url("http://www.azlro.org/chad/images/IMG_3699-1920x1080.JPG");
}
...to fade the background image from the image itself to white from left to right. However, I want some of image (500 pixels) to not fade at all and then start fading from there. Is that possible?
This can be achieved by using the ::before selector.
The ::before selector inserts something before the content of each selected element(s), in your case, the linear-gradient 'layer'.
I'm not totally sure this is what you are after, but hopefully this will guide you to a solution for your project. You will have to play around with the opacity, width and possibly other factors to get it exactly how you want.
As the above commenter suggested, you can add values to each color inside your linear gradient to determine the amount that you want to persist, such as:
linear-gradient(to right, transparent 500px, white);
html, body {
width: 100%;
height: 100%;
}
.layered-image {
width: 100%;
height: 100%;
background: url('https://upload.wikimedia.org/wikipedia/commons/6/62/Starsinthesky.jpg') center center no-repeat;
background-size: cover;
}
.layered-image:before {
content: '';
position: absolute;
background-image: linear-gradient(to right, transparent, white);
opacity: 2.5;
height:100%;
width:100%;
}
<div class="layered-image">
</div>
Use opacity:
.layered-image {
opacity:0.8;
}
Simply adjust the gradient:
.layered-image {
height: 200px;
background: linear-gradient( to right, transparent 0,transparent 200px /*edit this value*/ ,white 60%),
url("https://lorempixel.com/1000/800/") center/cover;
}
<div class="layered-image">
</div>
I am trying to get a div to have a blue background image which is 500px wide. I then am trying to get the gradient to be white at the very left of the div and as it goes right the background image is slowly visible
This css code will be useful to make it gradient
.gradient {
width: 200px;
height: 200px;
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
}
Use the above css in html using class
<div class="gradient">
gradient box
</div>
I actually just posted something similar on another question, but it applies in this case as well. Here it is in action:
http://sassmeister.com/gist/3528cb23d3e831231949
And the CSS to achieve this effect:
.hero {
width: 100%;
height: 500px;
background: url("http://placesheen.com/1200/500") center center no-repeat;
background-size: cover;
}
.hero:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 508px;
background-image: linear-gradient(rgba(255, 255, 255, 0.2), white);
}
Of course be sure to add the correct vendor-prefixes so that it is cross-browser compatible. And if you wanted to change gradient directions you would change the gradient values.
The html:
<div class="hero">
You could put content here if you want
</div>
More on gradients:
http://www.w3schools.com/css/css3_gradients.asp
I have a background image set up through CSS.
html {
background-image: url('../img/cello.jpg');
background-attachment: fixed;
background-size: 100%;
}
I plan on having a different background image for different pages of the website: so it's important that text is legible over it. Right now I've got a translucent black background to my #main content box in the middle like this in order to ensure legibility:
#main {
background: rgba(0, 0, 0, 0.5);
}
What I really want to do, though, is to have that kind of translucent background over the entire background image, because the black box looks a bit clunky. I've tried making a <div id=#tint> which includes the whole HTML document and giving rgba(0, 0, 0, 0.5) to #tint, but that doesn't work at all--I can either get nothing to change or I can get the entire background to become a simple grey with no background image visible at all. Is this simply not possible?
Use background-blend-mode for a simple tint
You can use the background-blend-mode css property:
.box {
width: 300px;
height: 300px;
background-size: cover;
background-image: url('https://placehold.co/300');
}
.background-tint {
background-color: rgba(200,100,0,.5);
background-blend-mode: multiply;
}
<div class="box background-tint"></div>
Place it on any element with a background image and you're good to go.
The property is well supported in modern browsers NOT including IE 11. For non supporting browsers you can use a polyfill.
Working demo
Other Options
Use filter for a complex tint
You can use the filter css property:
.box {
width: 300px; height: 300px;
background-size: cover;
background-image: url('https://placehold.co/300');
}
.background-tint {
filter: sepia(100%) saturate(200%) brightness(70%) hue-rotate(330deg);
}
<div class="box background-tint"></div>
Place it on any element with a background image and you're good to go.
In order to change the color change the hue-rotate value.
The property is well supported in modern browsers NOT including IE 11.
Working demo
Use a flat linear-gradient and a multiple background overlay
.background-tint {
background-image:
linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5) ),
url('http://placehold.it/420')
}
I think this is the most widely used technique but it has the downside of being hardcoded i.e. you can't just take a class, stick it on an element and make a tint.
You could make this into a less or sass mixin, something like:
less
.background-tint(#tint-color, #image-url) {
background-image:
linear-gradient( #tint-color, #tint-color ),
url( #image-url )
}
sass
#mixin background-tint($tint_color, $image_url) {
background-image:
linear-gradient( $tint_color, $tint_color ),
url( $image_url )
}
Working demo
Use a transparent background
This method has the advantage of working on most browsers and is just a nice class you add to any element.
The downside is that if you have anything else inside of that element you will have to wrap it in a div with some kind of positioning position: relative would work best.
Example:
.box {
width: 300px; height: 300px;
background-size: cover;
background-image: url('http://placehold.it/300');
color: #facebc;
}
.background-tint { position: relative; }
.background-tint::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
margin: auto;
}
.u-relative { position: relative; z-index: 1; }
<div class="box background-tint">
<div class="u-relative">300 x 300</div>
</div>
Working Demo
I think you need to create an overlay element (potentially div) which has the sought translucent background. Something like:
.overlay {
z-index: 1;
height: 100%;
width: 100%;
position: fixed;
overflow: auto;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.7); /*can be anything, of course*/
}
And of course, a little demo: little link.
This worked great for me:
https://css-tricks.com/tinted-images-multiple-backgrounds/
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(image.jpg);
}
And building on another answer, you can do this with existing colors in less like:
linear-gradient(
fade(#brand-primary, 50%),
fade(#brand-primary, 50%)
),
It would be the overlay property
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingoverlay
But it's a draft. Don't rely on it
Try opacity:
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
This is the simplest solution to the problem in my opinion.
.parent-div{
background-color : desired-color
}
#image-id{
opacity: dersired_value%
}
To increase readibity background-color: black and opacity percentages of range 50 to 60% seem to work nicely.