How To Change Background Picture In Cs 1.6

Introduction

opacity is a CSS holding that allows you lot to change the opaqueness of an chemical element. By default, all elements take a value of ane. By changing this value closer to 0, the element volition appear more and more transparent.

A common use case is using an paradigm as office of the background. Adjusting the opacity can ameliorate the legibility of text or achieve the desired appearance. However, there is no style to target the groundwork-image of an element with opacity without affecting the child elements.

In this article, you volition be presented with two methods to work effectually this limitation for background images with opacity.

Prerequisites

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

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

Method 1 — Using a Split Image Element and Positioning

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

Here is an example of the markup for this arroyo:

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

And here are the accompanying styles:

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

This markup and styles will produce a result with text on top of an image:

Hello World!

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

At that place are some limitations to this approach. Information technology assumes that your prototype is large enough to accomodate the size of any element. Yous may demand to enforce size limitations to preclude an image from appearing cut off or non covering the entire height of an element. It will too crave additional adjustments if you want to control the "groundwork position" and no clean "groundwork repeat" alternative.

Method ii — Using CSS Pseudo-Elements

The second arroyo will rely upon pseudo-elements. The :earlier and :afterwards pseudo-elements are bachelor to most elements. Typically, you would provide a content value and use it to append extra text at the get-go or end. However, information technology is also possible to provide an empty string and and so you lot can apply the pseudo-elements for designs.

Here is an case of the markup for this arroyo:

                                                    <div              course                              =                "demo-wrap"                            >                                                      <div              course                              =                "demo-content"                            >                                                      <h1              >            Hello World!                              </h1              >                                                      </div              >                                                      </div              >

And here are the accompanying styles:

                      .demo-wrap            {                          position              :              relative;                        }            .demo-wrap:before            {                          content              :              ' '              ;                                      display              :              cake;                                      position              :              accented;                                      left              :              0;                                      pinnacle              :              0;                                      width              :              100%;                                      height              :              100%;                                      opacity              :              0.6;                                      background-image              :                              url                (                'https://assets.digitalocean.com/labs/images/community_bg.png'                )                            ;                                      groundwork-repeat              :              no-repeat;                                      background-position              :              50% 0;                                      groundwork-size              :              comprehend;                        }            .demo-content            {                          position              :              relative;                        }

This markup and styles will produce a event with text on height of an image:

Hello Earth!

The parent demo-wrap <div> establishes an absolute positioning containing block. The pseudo-element :before is set to position: absolute, assigned a slight opacity, and uses groundwork-size: comprehend to occupy all the available space.

This approach has the reward of support for other background properties similar groundwork-position, background-repeat, and background-size. This approach has the disadvantage of using one of the pseudo-elements which may disharmonize with some other design effect - like a clearfix solution.