Menu
I am pulling my hair out over this. I have tried literally everything I have found and at this point I'm guessing I must just be making some kind of mistake. I am trying to darken the background image so that it is not quite as saturated.
Here is my HTML:
<body id="home">
<header>
<nav>
<ul class="pull-left">
<li><a href="#">Bearbeard Logo</a></li>
<li><a href="#">World</a></li>
</ul>
<ul class="pull-right">
<li><a href="#">Eretikas</a></li>
<li><a href="#">Custom</a></li>
</ul>
<div id="slogan">THE HERETIC SWORD</div>
</nav>
</header>
</body>
And my CSS:
#home {
background-image: url(file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
nav li {
display: inline;
position: relative;
float: left;
}
nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
#slogan {
color: #FFFAF0;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 18px;
opacity: 0.5;
text-align: center;
font-weight: bold;
}
This gives me a background that completely covers the page. But I want to darken it (without hovering, or clicking). Everything I have tried has NOT achieved any darkening whatsoever (I've tried fake-gradients, reba stuff, etc.), and somehow gets in the way of <div id="slogan"> and <nav>, pushing them all over the place.
Is my formatting just totally incorrect?
697
Setting background-blend-mode to darken would be the most direct and shortest way to achieve the purpose however you must set a background-color first for the blend mode to work. This is also the best way if you need to manipulate the values in javascript later on.
when you want to brightness or darker of background-color, you can use this css code.brighter-span { filter: brightness (150%); }.darker-span { filter: brightness (50%); }
This is the original pic: By setting the opacity to 0.5 , the images will turn white (ish) Now all we need to do to make it darker is to change the background color to black : We can use this to create cool hover effect. you can check out the pen that I made 2. Using filter property:
The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. This example shows a bad combination of text and background image. The text is hardly readable: Note: When using a background image, use an image that does not disturb the text.
#home {
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This should work
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
