Understand images for web developers [Part 4]

This will be the fourth part of the images for the web developer series. I have covered the whole series in depth; if you are curious, you can check it out here. Let's talk about background-images

Background image

Background images is the image in background

Real life

In web

Let's have a look at HTML and CSS code

<main class="container">
    <article class="content">
       <h1>Background Images</h1>
    </article>
</main>

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75vw;
  height: 60vh;
  border: 1px solid hsl(0, 0%, 75%);
  background-image: url(https://source.unsplash.com/TFyi0QOx08c/1800x1200);
}

Let's have a concrete number of pixels. Our container box has a width and height of 1440 x 582 based on my device, and the original image from Unsplash is 1200 x 1800, so it won't fit into the container. Some parts of the images were cropped, Let's have a few experimental

Background-size: contain;

This value scales the background image to fit within the container while maintaining its aspect ratio. The entire image will be visible, but there may be space (blank areas) in the container if the aspect ratios don't match.

The browser will try to fill in a black space with the same background image. To get rid of it, we can set background-repeat:no-repeat.

Background-size: cover

This value scales the background image as large as possible so that it completely covers the container. This may result in cropping or clipping of the image if the aspect ratio of the container and the image differ. It ensures that no empty space is visible in the container

With every property we set for background size, whether it is a container or cover, there's one thing that the browser will always keep: the aspect ratio of an image :)

You can check more properties that the browser supports here

Background properties

Background-clip: It determines where the background of an element should be visible and where it should be clipped ( we will discover it in the next chapter )

Background-repeat: A property is used to control how a background image is repeated or tiled within an element ( if the background still has the space for the image to get repeated)

Background-position: It is used to control the starting position of a background image within an element's background area

• no-repeat

• repeat

• repeat-x

• repeat-y

• round

• space

Background-origin: It is used to determine the origin or starting point of a background image within an element's box model

/** Let's review all of the CSS background property **/
background-color:color;
background-image:url(url);
background-position:position;
background-size:size; (50% width and height of the container)
background-repeat:repeat-style;
background-attachment:attach;
background-origin:origin;
background-clip:clip;
/** Shorthand **/
background: color url(url) position repeat-style/ size attach origin clip
/** Any missing value will be assign the default value **/
And you dont have to remember the orders , every background props
takes a specific value
The browser can figure it out

Multiple backgrounds

The contrast between the text and the background is easy to read, but it's lacking in visual interest.

Let's use some of the background image techniques to enhance visibility

article {
    background: url('mountain.png') no-repeat bottom /100%,
                url('stars.png'),
                url('sunrise.png') repeat-x bottom/100% 300px,
                url('moon.png') no-repeat 90% 15%/100px 100px,    
                black ;
}
/** Note layers of background is important **/
/** Mountain has to be the first layer **/
/** or we can write it in different way **/
article {
  background-image: url('mountain.png') , url('stars.png') , url('sunrise.png') , url('moon.png');
  background-repeat: no-repeat , no-repeat , repeat-x , no-repeat;
  background-size: 100% , auto , 100% 300px , 100px 100px;
  background-position: bottom , center , bottom , 90% 15%;
  background-color: black;
}

Problem with background images

Photos can be very dynamic, with a lot of really light areas and a lot of dark areas. While the text might look great in dark areas, it gets lost in light areas. Dark text looks great in some areas but gets lost in others.

Add an overlay

One way to increase the overall text contrast is to add a semi-transparent overlay to the background image

.background-section::before {
 content: "";
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%:
 background-color:rgba(0,0,0,0.5);
}

Lower the image contrast

Lowering the contrast will change how light or dark an image feels overall, so make sure to adjust the brightness to compensate

Colorize the image

Another way to help text stand out against an image is to colorize the image with a single color

Some of the steps you can take

• Lower the image contrast to balance things out a bit

• Desaturate the image to remove any existing color

• Add a solid fill using the "multiply" blend mode

Add a text-shadow

If you want to preserve a bit more dynamics in the background, a text shadow can be a great way to increase contrast only where you need it the most

Combining text-shadow and background-image techniques can enhance the overall look and feel of our product

In this article, we explore background images in web development, covering essential techniques such as background size, background properties, multiple backgrounds, and enhancing text visibility against images. We also discuss various ways to improve text contrast, like adding overlays, colorizing images, and using text shadows. Dive in to learn more about these techniques and their impact on your website's overall look and feel.