How to Use CSS Background Image

How to Use CSS Background Image

Let’s say you want to add a few images to a webpage. The CSS background image attribute is one option.

The background-image property in CSS is used to make an image of the element’s background. We can use this CSS property to specify one or more background images for an element.

The image is placed in the top-left corner of an element by default, and it is repeated both horizontally and vertically. The backdrop image should be picked to match the color of the text. An improper combination of text and background image could result in a webpage that is poorly designed and difficult to read.

This property’s URL() value allows us to include a file path to any picture. It will display the backdrop of the element. For the background, we can use numerous photos or a combination of gradients and photos. If the background image fails to load or if we utilize gradients but the matching browser doesn’t support them, we can use the fallback value (the value used as a substitute) as the element’s background color.

This attribute, according to the documentation, applies one or more background photos to an element, such as a div>. It can be used for aesthetic purposes, such as creating a textured website background.

Add an Image

The background-image attribute makes it simple to add an image. Simply enter the image’s path in the URL() value.

As illustrated in the sample below, the image path can be a URL:

div {

   /* Background pattern from Toptal Subtle Patterns */

   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");

   height: 400px;

   width: 100%;

}


It could also be a local path. Here’s an illustration:

body {

   /* Background pattern from Toptal Subtle Patterns */

   height: 400px;

   width: 100%;

   background-image: url("./images/oriental-tiles.png");

}


Add Multiple Images

You can apply multiple images to the background-image property.

div {

/* Background pattern from Toptal Subtle Patterns */

   height: 400px;

   width: 100%;

   background-image:

       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),

       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");

   background-repeat: no-repeat, no-repeat;

   background-position: right, left;

}

 

That’s a lot of code. Let’s break it down.

Separate each image url() value with a comma.

background-image:

    url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),

    url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");

 

Now position and enhance your images by applying additional properties.

background-repeat: no-repeat, no-repeat;

background-position: right, left;

Background pictures can have various sub-properties, such as background-repeat and background-position, which we utilized in the example above. Gradients can even be added to a backdrop image.

Take a peek at what it looks like once we’ve put it all together.

Order Matters

Because of the stacking order, the order in which you list your photographs matters. According to the manual, the first image listed is closest to the user. Then there was the one after that and the one after that, and so on.

Here’s an example.

div {

/* Background pattern from Toptal Subtle Patterns */

   height: 400px;

   width: 100%;

   background-image:

       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),

       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");

   background-repeat: no-repeat, no-repeat;

}

 

Two images are listed in the code above. The first image (morocco-blue.png) will be displayed first, followed by the second (oriental-tiles.png). We only see the first image because both are the same size and lack opacity.

However, if we shift the second image (oriental-tiles.png) to 200 pixels to the right, we can see a portion of it (the rest remains hidden).

When everything is put together, this is what it looks like.

When Should You Use Background Image?

The background-image attribute has a number of advantages. However, there is a disadvantage.

The image may not be visible to all users, including those who use screen readers, according to the documentation.

This is due to the fact that the background-image attribute does not allow for the addition of textual information. As a result, screen readers will miss the image.

Only use the background-image parameter if you want to add some extra decoration to your page. Otherwise, if a picture has significance or purpose, use the HTML <img> element, as the manual suggests.

The alt attribute, which describes the image, can be used to add text to an image element in this fashion. Screen readers will recognize the presented text.

<img class="house"

       src="./images/farnsworth_house.jpeg"

       alt="A glasshouse designed by Ludwig Mies van der Rohe located in Plano, Illinois.">

 

Think of it this way: Background-image is a CSS property, and CSS is concerned with presentation or style, whereas HTML is concerned with semantics or meaning.

You have options when it comes to photos. If you need an image for decorating, the background-image property can be a decent option.

Read More:- 10 Most Usable Git Commands Every Developer Should Know

Conclusion

The background-image property in CSS is a crucial part of web design. It aids in the addition of the background picture as well as the control of its many settings. If necessary, colors might be substituted for the image. We learned what we know about it in this post by looking at various examples.

Let us know in the comments area if you have any questions or criticism about our CSS background-image post. Our professionals will respond as quickly as possible.

Back to top
%d bloggers like this: