How To Make Background Image

CSS Background Image – How to Add an Image URL to Your Div

Say you lot want to put an image or two on a webpage. One way is to apply the groundwork-image CSS holding.

This belongings applies one or more background images to an element, like a <div>, every bit the documentation explains. Use information technology for aesthetic reasons, such every bit adding a textured background to your webpage.

Add an Image

It'southward piece of cake to add an image using the background-image property. Just provide the path to the image in the url() value.

The paradigm path can exist a URL, as shown in the case below:

                div {    /* Background pattern from Toptal Subtle Patterns */    background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");    height: 400px;    width: 100%; }

Or it can be a local path. Here's an example:

                body {    /* Background blueprint from Toptal Subtle Patterns */    summit: 400px;    width: 100%;    background-image: url("./images/oriental-tiles.png"); }

Add together Multiple Images

Y'all tin utilise multiple images to the background-prototype property.

                div { /* Background design from Toptal Subtle Patterns */    height: 400px;    width: 100%;    background-paradigm:         url("https://amymhaddad.s3.amazonaws.com/morocco-blueish.png"),        url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");    background-echo: no-echo, no-repeat;    background-position: right, left;  }

That's a lot of code. Let's suspension it down.

Split up each prototype url() value with a comma.

                background-epitome:      url("https://amymhaddad.s3.amazonaws.com/kingdom of morocco-blue.png"),     url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");

Now position and heighten your images by applying additional properties.

                background-echo: no-echo, no-repeat; groundwork-position: right, left;

There are several sub-properties you can add to your groundwork images, such as background-repeat and background-position , which we used in the above example. You lot can even add together gradients to a background image.

Encounter what it looks like when nosotros put everything together.

Club Matters

The order that you listing your images in matters because of the stacking order. That means the beginning image listed is nearest to the user, co-ordinate to the documentation. Then, the adjacent one, and the next, and then on.

Hither's an example.

                div { /* Background pattern from Toptal Subtle Patterns */    height: 400px;    width: 100%;    background-prototype:         url("https://amymhaddad.s3.amazonaws.com/kingdom of morocco-blue.png"),        url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");    background-repeat: no-repeat, no-echo; }

We've listed 2 images in the lawmaking above. The start image (morocco-blue.png) will exist in forepart of the second (oriental-tiles.png). Both images are the same size and lack opacity, so nosotros but see the first prototype.

But if we motility the second image (oriental-tiles.png) over to the right past 200 pixels, and then you can encounter role of it (the residue remains hidden).

Hither'due south what it looks like when we put everything together.

When Should You Use Groundwork Image?

There'due south a lot to like virtually the background-image property. But there's a drawback.

The image may not be accessible to all users, the documentation points out, like those who utilise screen readers.

That's because you tin't add textual data to the groundwork-image property. As a result, the image volition be missed by screen readers.

Use the background-image property only when you need to add some ornament to your page. Otherwise, apply the HTML <img> element if an paradigm has meaning or purpose, as the documentation notes.

That way, yous can add text to an image element, using the alt attribute, which describes the paradigm. The provided text will be picked up by screen readers.

                <img class="house"         src="./images/farnsworth_house.jpeg"        alt="A glass house designed by Ludwig Mies van der Rohe located in Plano, Illinois.">

Think of it this mode: background-prototype is a CSS property, and CSS focuses on presentation or manner; HTML focuses on semantics or meaning.

When information technology comes to images, you lot've got options. If an image is needed for ornament, so the background-image property may exist a skilful choice for you.

I write nearly learning to program and the best ways to get about information technology ( amymhaddad.com).

Larn to lawmaking for gratuitous. freeCodeCamp'southward open source curriculum has helped more than than 40,000 people get jobs as developers. Get started