Geek Answers Handbook

How to darken CSS background image?

I am pulling my hair out because of this. I tried literally everything I found, and at that moment I assume that I should just make some kind of mistake. I am trying to darken the background image so that it is not so 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 tried did NOT achieve any browning (I tried fake gradients, reba , etc.) and somehow interfered with <div id="slogan"> and <nav> by clicking them everywhere.

Is my formatting completely wrong?

+7
html css
source share
4 answers
 #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

+18
source share

You can set the background in the body tag and add a darkened layer with pseudo-content using rgba() + alpha , and then wrap all the content in a div and set it to position:relative to make it on top.

 html, body { height: 100%; margin: 0; } body { background: url("http://lorempixel.com/400/200") center center no-repeat; background-size: cover; position: relative; } body:before { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition: background .5s; } body:hover:before { /*for demo, move this line up if you want to darken it as default*/ background: rgba(0,0,0, .5); } div { position: relative; color: white; } 
 <div>Hello world!</div>
+4
source share

create a div container that matches 100% #home and then:

 #container { background: rgba(0, 0, 0, 0.5); }

opacity 0.5 = 50% ...

it will have the effect of darkening the background image

+1
source share

First order: You do not need an identifier or class in the body element

and then see the code below.

 body { background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(http://adityamehta.in/wp-content/uploads/2014/08/Sky-Blue-Sky.jpg); } nav a { color: #5a5a5a; font-size: 11px; font-weight: bold; padding: 14px 10px; text-transform: uppercase; } nav li { display: inline; position: relative; float: left; } #slogan { color: #FFFAF0; font-family: 'Raleway', sans-serif; font-weight: bold; font-size: 18px; opacity: 0.5; text-align: center; font-weight: bold; } 
 <body> <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> </body>

Original image thanks google :)

enter image description here

+1
source share

More articles:


All Articles