Darken Css Background Image? [Duplicate]

Name: Darken Css Background Image? [Duplicate]
Uploaded: 2026-09-27T07:15:13+00:00
Duration: 18 min 10 s
Description: Should Be a Fairly Simple Question. in My Website I Do This: #Landing-Wrapper { Display: Table; Width:100%; Background: Url('Landingpagepic. Jpg')...

Question

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?

Accepted Answer

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(');
  background-position: center top;
  height: 350px;
  color: white;
}

<div id="landing-wrapper">Lorem ipsum dolor ismet.</div>

Darken Css Background Image? [Duplicate]

Must Read

1 Answer

Chloe Bennett