How To Do A Background Image In Css

Introduction

opacity is a CSS property that allows you to change the opaqueness of an chemical element. By default, all elements have a value of 1. Past irresolute this value closer to 0, the element will appear more and more transparent.

A common use case is using an image as part of the background. Adjusting the opacity can amend the legibility of text or achieve the desired appearance. Notwithstanding, there is no way to target the groundwork-image of an element with opacity without affecting the child elements.

In this article, you lot will be presented with 2 methods to work effectually this limitation for background images with opacity.

Prerequisites

If you would like to follow along with this article, you volition need:

Familiarity with opacity.
Familiarity with position: relative and position: absolute.
Familiarity with stacking context and z-alphabetize
Familiarity with the :before and :after pseudo-elements.

Method 1 — Using a Separate Image Element and Positioning

The first approach volition rely upon two elements. I is a "wrap" that provides a point of reference with position: relative. The second is an img element that appears backside the content with position: absolute and stacking context.

Hither is an case of the markup for this approach:

                                                    <div              grade                              =                "demo-wrap"                            >                                                      <img              class                              =                "demo-bg"                            src                              =                "https://assets.digitalocean.com/labs/images/community_bg.png"                            alt                              =                "                "                            >                                                      <div              form                              =                "demo-content"                            >                                                      <h1              >            Hello World!                              </h1              >                                                      </div              >                                                      </div              >

And here are the accompanying styles:

                      .demo-wrap            {                          overflow              :              hidden;                                      position              :              relative;                        }            .demo-bg            {                          opacity              :              0.vi;                                      position              :              accented;                                      left              :              0;                                      top              :              0;                                      width              :              100%;                                      height              :              auto;                        }            .demo-content            {                          position              :              relative;                        }

This markup and styles volition produce a result with text on pinnacle of an paradigm:

Hullo Earth!

The parent demo-wrap <div> establishes an absolute positioning containing block. The demo-bg <img> is set up to position: accented and assigned a slight opacity. The demo-content <div> is fix to position: relative and due to how the markup is arranged it has a college stacking context than demo-bg. It is as well possible to use z-index for finer control over the stacking context.

There are some limitations to this approach. It assumes that your paradigm is large enough to accomodate the size of any element. You may demand to enforce size limitations to prevent an epitome from actualization cutting off or not covering the entire height of an element. It will also require boosted adjustments if you desire to control the "background position" and no make clean "groundwork repeat" alternative.

Method 2 — Using CSS Pseudo-Elements

The second arroyo will rely upon pseudo-elements. The :before and :after pseudo-elements are available to most elements. Typically, yous would provide a content value and utilise it to append extra text at the starting time or end. However, information technology is also possible to provide an empty string and then you lot can utilize the pseudo-elements for designs.

Hither is an instance of the markup for this arroyo:

                                                    <div              grade                              =                "demo-wrap"                            >                                                      <div              class                              =                "demo-content"                            >                                                      <h1              >            Hi Earth!                              </h1              >                                                      </div              >                                                      </div              >

And here are the accompanying styles:

                      .demo-wrap            {                          position              :              relative;                        }            .demo-wrap:before            {                          content              :              ' '              ;                                      display              :              block;                                      position              :              absolute;                                      left              :              0;                                      top              :              0;                                      width              :              100%;                                      superlative              :              100%;                                      opacity              :              0.6;                                      background-paradigm              :                              url                (                'https://avails.digitalocean.com/labs/images/community_bg.png'                )                            ;                                      background-repeat              :              no-repeat;                                      background-position              :              50% 0;                                      groundwork-size              :              cover;                        }            .demo-content            {                          position              :              relative;                        }

This markup and styles will produce a result with text on peak of an paradigm:

Hello World!

The parent demo-wrap <div> establishes an accented positioning containing block. The pseudo-element :before is ready to position: accented, assigned a slight opacity, and uses background-size: cover to occupy all the available infinite.

This approach has the reward of support for other background backdrop similar groundwork-position, background-echo, and background-size. This approach has the disadvantage of using one of the pseudo-elements which may conflict with another design issue - like a clearfix solution.