This question already has answers here:
How to darken a background using CSS?
(11 answers)
Closed 7 years ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
Should be a fairly simple question. In my website I do this:
#landing-wrapper {
display:table;
width:100%;
background:url('landingpagepic.jpg');
background-position:center top;
height:350px;
}
What I'd like to do is make the background image darker. Since I have UI elements inside this DIV I don't think I can really place another div over it to darken it. Suggestions?
You can use the CSS3 Linear Gradient property along with your background-image like this:
#landing-wrapper {
display:table;
width:100%;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('landingpagepic.jpg');
background-position:center top;
height:350px;
}
Here's a demo:
#landing-wrapper {
display: table;
width: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/350x150');
background-position: center top;
height: 350px;
color: white;
}
<div id="landing-wrapper">Lorem ipsum dolor ismet.</div>
Related
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed last month.
I am trying to draw curve in html and css. I tried but not able to draw it correctly, Could someone please help me. I will attach a picture which I am trying to achieve.
Thanks
.box {
width: 500px;
height: 100px;
border: solid 5px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
}
HTML
<span class="styling">Ali Haider</span>
CSS
.styling {
border:none;
background:green;
color:white;
padding:15px 40px;
text-transform:uppercase;
cursor:pointer;
clip-path: polygon(0 0, 100% 1%, 80% 100%, 0% 100%);
}
This question already has answers here:
Weird effect when applying transparent border over an element with a gradient background
(7 answers)
Closed 2 months ago.
I have a div with a background defined as linear-gradient, and an almost transparent border on top of it. It should paint correctly, but the rendering is broken.
Here is the associated CodePen.
body {
background: black;
}
.gradient-background {
background: linear-gradient(270deg, #681c2e 0%, #232a6c 49.48%);
height: 80px;
border: solid 20px rgba(248, 251, 255, 0.1);
}
<div class="gradient-background"></div>
Do you know how to fix this with CSS? It behaves consistently on Chrome and Firefox. Is it an expected behavior in the spec of CSS and HTML?
rgba(248, 251, 255, 0.1); is what causes the issue.
Use background-origin: border-box; and it will work fine.
body {
background: black;
}
.gradient-background {
background: linear-gradient(270deg, #681c2e 0%, #232a6c 49.48%);
height: 80px;
border: solid 20px rgba(248, 251, 255, 0.1);
background-origin: border-box;
}
<html>
<body>
<div class="gradient-background"></div>
</body>
</html>
For more information about this, check this source.
This question already has answers here:
Is it possible to make a blurred gradient shadow with CSS?
(2 answers)
Closed 7 months ago.
What would the html and css look like to create a blurred gradient underneath an image?
I understand how to create the gradient, but am not sure how to get it underneath images.
Something like this:
The gradient can be found here:
background: linear-gradient(90deg, rgba(98,52,255,1) #6234FF%, rgba(255,0,128,1) 100%);
You can make use of a custom-gradient class which is styled like that:
.image-wrapper {
background-color: white;
height: 100%;
width: 100%;
}
.custom-gradient {
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
box-shadow: inset 0 0 12px 12px white, inset 0 0 3px 2px white;
background: linear-gradient(to right, rgba(98, 52, 255, 1), #6234FF, rgba(255, 0, 128, 1))
}
<div class="custom-gradient">
<div class="image-wrapper">
<h1>My image</h1>
</div>
</div>
This question already has answers here:
Is there a way to interpolate CSS variables with url()?
(4 answers)
Closed 4 years ago.
I need to pass an image to the CSS background like this it works:
.tinted-image {
height: 125px;
background: linear-gradient(to right, var(--color), var(--color2)),
url(https://static-cdn.jtvnw.net/ttv-boxart/Apex%20Legends-300x400.jpg);
}
but when I try to do it like this, I get a syntax error in VS Code
.tinted-image {
height: 125px;
background: linear-gradient(to right, var(--color), var(--color2)),
url(var(--url));
}
You can use it like the following:
:root {
--color: rgba(255, 0, 0, 0.5);
--color2: rgba(0, 255, 0, 0.5);
--url: url(https://static-cdn.jtvnw.net/ttv-boxart/Apex%20Legends-300x400.jpg);
}
.tinted-image {
height: 125px;
background: linear-gradient(to right, var(--color), var(--color2)), var(--url);
width: 200px;
}
<div class="tinted-image"></div>
CSS variables doesn't work on Internet Explorer. You can find all browsers with CSS variable support here: https://caniuse.com/#feat=css-variables
This question already has answers here:
How to darken a background using CSS?
(11 answers)
Closed 6 years ago.
I have a jumbotron from bootstrap and I want to darken its background without touching the text which is entered in it. Is there a way to do such a thing?
I have looked everywhere, but all solutions I've found darken the text as well.
What I have so far:
.mainJumbotron {
margin: 0px;
height: 250px;
text-align: center;
background-image: url(http://i.imgur.com/qj2w73W.png);
background-repeat: no-repeat;
background-size: cover;
}
<div class="jumbotron mainJumbotron">
<h1 style="">Hakkımızda</h1>
</div>
try something like this:
In your jumbotron class, give it a little more CSS by adding position:relative; to it if it's not already there. That will allow the next step to be positioned inside of that box.
Then, add an :after pseudo element. with the following CSS
.jumbotron:after {
content:"";
display:block;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
position:absolute;
top:0;
left:0;
z-index:1 /*Added this in the updated */
}
the background-color shade is controlled by the final value. 0.5 is 50% opacity, raise to 1 or lower to 0 to get your desired darkness.
UPDATE What has been pointed out is that anything inside of the box is covered by the new pseudo element. Here's a cheap fix. Add z-index:1; to your :after alement, then add the below
.jumbotron > * {
position:relative;
z-index:2;
}
Thanks to cale_b https://jsfiddle.net/e8c3ex0h/3/
You can try the following in you CSS to see if you get the desired result
#element {
-webkit-box-shadow: inset 0px 50px 100px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: inset 0px 50px 100px 0px rgba(0, 0, 0, 1);
box-shadow: inset 0px 50px 100px 0px rgba(0, 0, 0, 1);
}
This is how to do it :
body, h1 {
margin: 0;
}
.mainJumbotron {
margin: 0px;
height: 250px;
text-align: center;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(http://i.imgur.com/qj2w73W.png);
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
h1 {
color: #fff;
}
<div class="jumbotron mainJumbotron">
<h1 style="">Hakkımızda</h1>
</div>
(see also this Fiddle)