How To Get Background Image From Website

CSS Background Image – With HTML Example Code

What a user sees on a website will impact how adept their user experience is. It will also affect how easily they can use the whole site in general.

Calculation images to the background of certain parts of a website is often more than visually appealing and interesting than only changing the background-color.

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

This article explains how to add together images to your HTML code and how to then fine-tune them to look meliorate.

Background Image Syntax

The starting time step is to brand sure you create an assets directory (folder) to hold the images you lot want to utilize in your project.

For case we tin can create an images folder in the project nosotros are working on and add an epitome called sunset.png that we want to apply.

The background-image CSS property allows you to and so place the image behind any HTML element you wish.

This could either exist the whole page (past using the body selector in CSS which targets the <body> element in our HTML), or just a standalone specific office of the page such as a section element like in the example below.

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

                section {      groundwork-prototype: url("images/sunset.png");         }

Let's talk over what'due south going on hither in detail:

section specifies the tag you want to add together the prototype to.
url() is used to tell CSS where our image is located.
Inside the parentheses, "images/dusk.png" is the path to the prototype. This lets the browser know what URL to pull.
The path in this example is chosen a relative path which ways it is a local file, relative to our project and to our current working directory and is not a web address. To add together images we can also utilise an absolute path, which is a full spider web address and starts with a domain URL (http://www.).
Using quotes is a good habit but we can omit them, so groundwork-paradigm: url(images/sunset.png) works the same.
Don't forget the semicolon!

How to End Background Repeat

When y'all apply a background image to an chemical element, by default it will echo itself.

If the epitome is smaller than the tag of which it's the background, it will repeat in order to fill in the tag.

How practise we stop this from happening?

The background-echo holding takes in iv values and nosotros are able to change the direction in which the image repeats, or stop the paradigm from repeating itself all together.

                section {     background-echo: repeat;         }

This is the default value if we don't requite the background-repeat property a value. In this case 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

                department {     background-repeat: no-repeat;         }

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

The no-echo value stops the epitome from repeating itself from all directions. The prototype is simply shown one time.

                section {     groundwork-repeat: repeat-y;         }

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

                department {     groundwork-repeat: echo-y;         }

This value repeats the image only vertically on the page. The image is repeated down the folio ,in the y-management. The y-direction in math is from height to bottom.

How to Gear up Background Position

After 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.

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

The selector takes in two values. The first ane is for the horizontal position, or 10-direction (how far beyond the tag). The second i is for the vertical position, or y-direction (how far downwards the tag).

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

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

This will motility the image 20px beyond and 30px down the containing tag.

Instead of pixels we tin can utilise a set of keywords like right, left, meridian, down, or center to place the image at the correct, left, top, down, or middle of the tag.

                section {     background-position: right center;         }

This places the image at the right manus side of the center of the tag.

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

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

                section {     groundwork-position: center centre;         }

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

To position an image with finer detail, it is worth mentioning that we can utilize percentages.

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

This positions the image twenty% across the tag and twoscore% downwardly the tag.

And so far we accept seen values used in combination, only we can also only specify i value like background-position: 20px; or background-position: centre; or background-position: 20%;, which applies it to both directions.

How to Resize a Background Image

To control the size of the background epitome we can employ the background-size property.

Again, like the previous backdrop mentioned, information technology takes in ii values. One for the horizontal (x) size and ane for the vertical (y) size.

We tin use pixels, like so:

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

If we practice not know the exact width of the container we are storing the epitome in, there is a set of specific values we can requite the property.

groundwork-size: cover; resizes the background epitome and then it covers up the whole tag's background space no matter the width of the tag. If the image is also large and has a larger ratio to the tag it is in, this ways the image will get stretched and therefore cropped at its edges.
groundwork-size: incorporate; contains the image, as the name suggests. It will make sure the whole image is shown in the background without cropping out whatever of it. If the image is much smaller than the tag there will exist infinite left empty which will go far repeat to fill information technology upward, and then we tin apply the groundwork-echo: no-repeat; dominion nosotros mentioned earlier.

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

When nosotros change information technology to groundwork-size:contain; nosotros run into that the paradigm shrinks to fit the section tag.

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

How to Use the Background Attachment Property

With the groundwork-attachment belongings we can control where the background epitome is attached, pregnant if the prototype is fixed or not to the browser.

The default value is background-attachment: scroll;, where the groundwork epitome stays with its tag and follows the natural menstruum of the folio by scrolling upward and down as we whorl upward and down.

The second value the holding can have is background-attachement: fixed;.
This makes the background image stay in the same postion, fixed to the folio and fixed on the browser's viewport. This creates a parallax effect which yous tin see an instance of here:

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

Background Gradients

A different use instance for the groundwork-paradigm property is for telling the browser to create a slope.

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

The simplest way to do this is to specify the angle. This controls the direction of the gradient and how to colors will blend. Lastly add two colors that you want blended together in a gradient for the tag'south groundwork.

A gradient that goes from top to bottom and from black to white is:

                section {     background-image: linear-gradient(black,white);         }

The most common degrees used for gradients are:

0deg from top to lesser
90deg from left to right
180deg from lesser to height
270deg from correct to left

The above degrees each correspond with to top, to right, to bottom and to left, respectively.

                department{   background-image: linear-gradient(to left,pink,orange);         }

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

Instead of keyword colors we tin use hex colors to be more item and have a wider range of options:

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

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

Nosotros can also include more two colors in a gradient, creating different affects and color schemes.

Conclusion

This marks the finish of our introduction to the bones syntax of the background-epitome belongings.

From here the possibilities are endless and leave room for a lot of creative expression. These effects aid the user take 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!

Learn to code for costless. freeCodeCamp's open source curriculum has helped more than than xl,000 people get jobs every bit developers. Get started