Background image

[etjdogger]

When inserting an image as a background, i want it to have a subtle blackish covering over the entire image to darken it and to have the text over it with 100% clarity. in order to do this, do i HAVE to insert it using CSS? See code below please. Or, am i able to insert it in HTML using the tag? Thanks!

.aboutussd {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 928px;
    text-align: center;
    background-image: url(images/background.jpg);
}

[janneslohmeijer]

Hey Eric,

If you want text over an image there are two approaches, either use a background image to a div with a text or place a text box over an image and position them using css modifiers.

Darkening an image directly placed in the HTML can be done using filter: brightness(value); for more info check link below. However this does not work for background images. But there is a trick you can use for this ;). You can place a linear gradient with transparency value over a background image like so:

background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(images/background.jpg);

So you first state a linear gradient then put a , and call for the url.

More info on filter: brightness(value);

brightness()