How To Set Picture As Background In Html

CSS Background Image – With HTML Example Code

What a user sees on a website volition impact how good their user experience is. It will besides affect how easily they tin can utilize the whole site in general.

Adding images to the background of certain parts of a website is often more visually highly-seasoned and interesting than merely changing the background-color.

Modern browsers support a variety of image file types like .jpg, .png, .gif, and .svg.

This commodity explains how to add images to your HTML code and how to then fine-tune them to await better.

Background Epitome Syntax

The commencement step is to make sure y'all create an assets directory (folder) to concord the images you want to use in your project.

For case we tin create an images folder in the projection nosotros are working on and add an image called sunset.png that we want to use.

The groundwork-prototype CSS property allows you to and then place the prototype behind whatsoever HTML element y'all wish.

This could either be the whole page (by using the torso selector in CSS which targets the <body> element in our HTML), or just a standalone specific part of the page such equally a department chemical element similar in the case below.

To add a background-image to a section tag in your .css file, write the following code:

                section {      background-image: url("images/dusk.png");         }

Permit's discuss what's going on here in detail:

section specifies the tag you desire to add the image to.
url() is used to tell CSS where our image is located.
Within the parentheses, "images/sunset.png" is the path to the prototype. This lets the browser know what URL to pull.
The path in this case is called a relative path which means it is a local file, relative to our project and to our electric current working directory and is not a web accost. To add images we can also use an absolute path, which is a full web address and starts with a domain URL (http://www.).
Using quotes is a practiced habit but we tin can omit them, so background-image: url(images/sunset.png) works the same.
Don't forget the semicolon!

How to Stop Background Repeat

When you lot apply a background paradigm to an chemical element, past default it will repeat itself.

If the image is smaller than the tag of which it's the background, information technology volition echo in gild to fill up in the tag.

How exercise we stop this from happening?

The groundwork-repeat belongings takes in iv values and we are able to change the direction in which the image repeats, or stop the image from repeating itself all together.

                section {     background-repeat: repeat;         }

This is the default value if nosotros don't give the groundwork-repeat belongings a value. In this instance the image is repeated both horizontally and vertically so in both x-direction and y-direction respectively until it fills the space.

Screenshot-2021-07-20-at-9.10.06-PM

                section {     background-repeat: no-repeat;         }

Screenshot-2021-07-20-at-9.11.39-PM

The no-echo value stops the image from repeating itself from all directions. The image is just shown once.

                section {     background-repeat: echo-y;         }

This value repeats the image just horizontally on the page. The image is repeated across the page, in the ten-direction. The x-direction in math is from the left to the right.

                department {     background-repeat: repeat-y;         }

This value repeats the prototype only vertically on the page. The paradigm is repeated downwardly the folio ,in the y-direction. The y-direction in math is from summit to bottom.

How to Gear up Groundwork Position

Subsequently adding a background image and stopping it from repeating, we are able to farther control how it looks within the background of the tag by improving its position.

Nosotros'll use the background-position belongings to do this.

The selector takes in two values. The starting time one is for the horizontal position, or x-direction (how far across the tag). The second one is for the vertical position, or y-direction (how far downward the tag).

The values can be units, like a pair of pixels:

                section {     background-position: 20px 30px;         }

This will move the image 20px across and 30px downwards the containing tag.

Instead of pixels we can use a set up of keywords like right, left, peak, downwardly, or middle to place the image at the right, left, top, downwards, or center of the tag.

                department {     groundwork-position: right center;         }

This places the image at the right paw side of the heart of the tag.

Screenshot-2021-07-21-at-9.02.55-AM

If we wanted to center it both horizontally and vertically, we would do the following:

                section {     groundwork-position: center centre;         }

Screenshot-2021-07-21-at-9.07.41-AM

To position an image with finer item, information technology is worth mentioning that we can apply percentages.

                section {     background-position: 20% 40%;         }

This positions the image 20% across the tag and 40% down the tag.

And so far we take seen values used in combination, just nosotros can also just specify one value like background-position: 20px; or background-position: middle; or background-position: twenty%;, which applies it to both directions.

How to Resize a Background Image

To control the size of the groundwork image nosotros tin can use the groundwork-size property.

Once again, like the previous properties mentioned, it takes in two values. I for the horizontal (ten) size and i for the vertical (y) size.

Nosotros tin can apply pixels, like so:

                department {     groundwork-size: 20px 40px;     /* sizes the epitome 20px across and 40px down the page */         }

If we do not know the exact width of the container we are storing the image in, there is a fix of specific values nosotros can requite the property.

background-size: embrace; resizes the background prototype and then it covers upwardly the whole tag's background infinite no matter the width of the tag. If the image is too big and has a larger ratio to the tag information technology is in, this ways the image will get stretched and therefore cropped at its edges.
background-size: incorporate; contains the image, as the name suggests. It volition make certain the whole epitome is shown in the groundwork without cropping out whatever of information technology. If the image is much smaller than the tag at that place will be space left empty which will make it repeat to make full it upwards, so we can use the background-repeat: no-repeat; dominion we mentioned earlier.

The rule background-size:cover; in this case will crop of parts of the prototype
Screenshot-2021-07-21-at-9.18.15-AM

When we change it to background-size:contain; we run across that the paradigm shrinks to fit the section tag.

Screenshot-2021-07-21-at-9.18.49-AM

How to Utilize the Background Attachment Property

With the background-zipper property nosotros tin control where the background image is attached, significant if the image is fixed or not to the browser.

The default value is background-attachment: scroll;, where the background image stays with its tag and follows the natural flow of the page past scrolling up and down every bit we whorl up and downward.

The second value the property can have is background-attachement: fixed;.
This makes the background image stay in the same postion, fixed to the page and stock-still on the browser'south viewport. This creates a parallax outcome which you can see an example of here:

Meet the Pen by Dionysia Lemonaki (@deniselemonaki) on CodePen.

Background Gradients

A different employ case for the background-epitome property is for telling the browser to create a slope.

The background-image in this case does not take a URL, but a linear-gradient instead.

The simplest way to do this is to specify the bending. This controls the direction of the slope and how to colors will alloy. Lastly add 2 colors that you desire composite together in a gradient for the tag'due south background.

A slope that goes from acme to bottom and from black to white is:

                section {     background-image: linear-slope(blackness,white);         }

The most common degrees used for gradients are:

0deg from superlative to bottom
90deg from left to right
180deg from bottom to top
270deg from right to left

The to a higher place degrees each correspond with to top, to correct, to bottom and to left, respectively.

                section{   background-image: linear-slope(to left,pinkish,orange);         }

Meet the Pen past Dionysia Lemonaki (@deniselemonaki) on CodePen.

Instead of keyword colors nosotros tin employ hex colors to exist more than detail and have a wider range of options:

                section{   groundwork-paradigm: linear-gradient(to left,#42275a, #734b6d)       }

See the Pen by Dionysia Lemonaki (@deniselemonaki) on CodePen.

We can also include more than 2 colors in a slope, creating different affects and color schemes.

Conclusion

This marks the end of our introduction to the basic syntax of the background-image property.

From here the possibilities are countless and exit room for a lot of creative expression. These effects help the user have a pleasant experience when visiting your website.

I hope this was helpful, and thank you for reading.

Have fun with your designs and happy coding!

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