How To Style Css Background Image

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

Say yous want to put an image or two on a webpage. I style is to use the background-prototype CSS belongings.

This property applies 1 or more background images to an chemical element, similar a <div>, every bit the documentation explains. Use it for aesthetic reasons, such as adding a textured groundwork to your webpage.

Add an Epitome

Information technology's piece of cake to add an image using the background-image property. Just provide the path to the paradigm in the url() value.

The image path tin can be a URL, equally shown in the case below:

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

Or it can exist a local path. Here's an case:

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

Add Multiple Images

You can apply multiple images to the background-prototype belongings.

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

That'due south a lot of lawmaking. Let'south intermission it down.

Dissever each image url() value with a comma.

                background-paradigm:      url("https://amymhaddad.s3.amazonaws.com/morocco-bluish.png"),     url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");

Now position and enhance your images past applying boosted properties.

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

At that place are several sub-properties you lot can add to your background images, such as background-echo and groundwork-position , which nosotros used in the above example. You lot tin can even add gradients to a groundwork image.

See what it looks similar when we put everything together.

Society Matters

The lodge that you list your images in matters because of the stacking order. That means the start image listed is nearest to the user, co-ordinate to the documentation. Then, the side by side ane, and the side by side, and and then on.

Hither'southward 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-echo; }

We've listed two images in the lawmaking to a higher place. The first epitome (morocco-bluish.png) will be in front of the 2d (oriental-tiles.png). Both images are the same size and lack opacity, and then we only see the start image.

But if we move the 2nd paradigm (oriental-tiles.png) over to the right past 200 pixels, then you can come across function of it (the residual remains subconscious).

Here'southward what information technology looks like when we put everything together.

When Should You lot Use Background Image?

There's a lot to like about the groundwork-epitome property. Merely there's a drawback.

The image may non be attainable to all users, the documentation points out, like those who use screen readers.

That's because you can't add together textual information to the background-image property. Equally a result, the image will be missed by screen readers.

Use the background-image property just when you need to add some decoration to your folio. Otherwise, use the HTML <img> chemical element if an image has pregnant or purpose, as the documentation notes.

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

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

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

When it comes to images, you've got options. If an image is needed for decoration, then the groundwork-image property may exist a adept choice for you.

I write about learning to program and the all-time means to become about it ( amymhaddad.com).

Acquire to code for complimentary. freeCodeCamp's open source curriculum has helped more than than 40,000 people get jobs as developers. Get started