How To Add Background Image To Div In Asp.net

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

Say you want to put an prototype or two on a webpage. I way is to use the background-paradigm CSS belongings.

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

Add together an Paradigm

Information technology'south like shooting fish in a barrel to add together an image using the background-epitome belongings. Just provide the path to the paradigm in the url() value.

The image path can be a URL, equally shown in the example beneath:

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

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

                trunk {    /* Groundwork pattern from Toptal Subtle Patterns */    tiptop: 400px;    width: 100%;    background-image: url("./images/oriental-tiles.png"); }

Add Multiple Images

You can employ multiple images to the background-prototype property.

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

That's a lot of code. Let's break information technology down.

Separate each image url() value with a comma.

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

At present position and heighten your images by applying boosted properties.

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

There are several sub-properties you can add to your groundwork images, such every bit background-repeat and background-position , which nosotros used in the above example. Y'all can even add gradients to a groundwork image.

See what it looks like when we put everything together.

Lodge Matters

The order that you list your images in matters considering of the stacking order. That means the showtime paradigm listed is nearest to the user, according to the documentation. And so, the side by side ane, and the next, and and so on.

Here'southward an example.

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

We've listed two images in the code higher up. The outset image (morocco-blue.png) will exist in forepart of the 2d (oriental-tiles.png). Both images are the aforementioned size and lack opacity, and then we only encounter the showtime image.

But if we motility the second image (oriental-tiles.png) over to the correct by 200 pixels, then you can meet office of information technology (the remainder remains hidden).

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

When Should You Utilise Background Prototype?

At that place's a lot to like about the groundwork-epitome holding. Simply there'southward a drawback.

The image may not exist accessible to all users, the documentation points out, similar those who use screen readers.

That's because y'all tin can't add textual information to the background-image property. As a result, the epitome will be missed by screen readers.

Utilize the background-image property only when y'all need to add some decoration to your page. Otherwise, apply the HTML <img> chemical element if an epitome has significant or purpose, as the documentation notes.

That fashion, y'all tin can add text to an image chemical element, using the alt attribute, which describes the image. The provided text will be picked upward past screen readers.

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

Recall of it this way: background-paradigm is a CSS property, and CSS focuses on presentation or style; HTML focuses on semantics or significant.

When it comes to images, you've got options. If an epitome is needed for decoration, then the background-image property may be a good option for you.

I write about learning to programme and the best ways to become well-nigh it ( amymhaddad.com).

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