What a user sees on a website will affect how skilful their user feel is. Information technology volition also affect how easily they can use the whole site in general.

Adding images to the groundwork of certain parts of a website is oft more visually appealing and interesting than just irresolute the background-colour.

Modernistic browsers support a diverseness of prototype file types similar .jpg, .png, .gif, and .svg.

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

Background Image Syntax

The starting time step is to brand sure you create an assets directory (folder) to concord the images yous desire to use in your project.

For example we can create an images folder in the project nosotros are working on and add together an prototype called sunset.png that we want to employ.

The background-image CSS property allows y'all to then place the image behind any HTML element you wish.

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

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

          section {      background-epitome: url("images/sunset.png");         }

Let's discuss what's going on here in particular:

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

How to Stop Background Echo

When you employ a background image to an element, by default it will echo itself.

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

How exercise nosotros stop this from happening?

The groundwork-repeat property takes in 4 values and we are able to modify the direction in which the prototype repeats, or stop the image from repeating itself all together.

          section {     background-repeat: repeat;         }

This is the default value if we don't give the background-repeat property a value. In this case the image is repeated both horizontally and vertically and so in both x-direction and y-management respectively until it fills the space.

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

          section {     background-repeat: no-echo;         }

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 only shown once.

          section {     background-echo: repeat-y;         }

This value repeats the epitome only horizontally on the page. The epitome is repeated across the page, in the x-management. The ten-management in math is from the left to the correct.

          section {     background-echo: echo-y;         }

This value repeats the epitome but vertically on the folio. The prototype is repeated down the page ,in the y-management. The y-management in math is from top to lesser.

How to Gear up Background Position

After adding a background image and stopping information technology from repeating, we are able to further control how it looks within the groundwork of the tag by improving its position.

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

The selector takes in ii values. The first one is for the horizontal position, or ten-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 {     groundwork-position: 20px 30px;         }

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

Instead of pixels we can utilise a ready of keywords like right, left, top, down, or center to place the image at the correct, left, elevation, downward, or center of the tag.

          section {     background-position: right centre;         }

This places the epitome at the right hand side of the heart of the tag.

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

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

          department {     background-position: heart center;         }

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

To position an prototype with finer detail, it is worth mentioning that we tin use percentages.

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

This positions the image xx% across the tag and xl% down the tag.

So far we have seen values used in combination, just we tin also just specify one value like groundwork-position: 20px; or background-position: centre; or groundwork-position: 20%;, which applies it to both directions.

How to Resize a Background Epitome

To control the size of the groundwork image we can apply the background-size holding.

Again, like the previous backdrop mentioned, it takes in two values. One for the horizontal (x) size and 1 for the vertical (y) size.

We tin apply pixels, like so:

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

If we practise not know the exact width of the container we are storing the epitome in, in that location is a prepare of specific values nosotros can requite the property.

  • groundwork-size: embrace; resizes the groundwork image then it covers up the whole tag'southward background infinite no matter the width of the tag. If the epitome is too large and has a larger ratio to the tag it is in, this means the image will get stretched and therefore cropped at its edges.
  • background-size: comprise; contains the image, as the name suggests. It will make sure the whole image is shown in the background without cropping out any of it. If the paradigm is much smaller than the tag there volition be space left empty which will get in repeat to fill up it up, and so nosotros can use the background-repeat: no-repeat; rule we mentioned earlier.

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

When we change information technology to groundwork-size:contain; we see that the image 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 tin can control where the groundwork image is attached, pregnant if the prototype is fixed or non to the browser.

The default value is background-attachment: whorl;, where the groundwork epitome stays with its tag and follows the natural flow of the page by scrolling up and down every bit we ringlet up and downwards.

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

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

Background Gradients

A different utilise case for the background-prototype belongings is for telling the browser to create a gradient.

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

The simplest mode to do this is to specify the angle. This controls the direction of the gradient and how to colors will alloy. Lastly add two colors that y'all desire composite together in a slope for the tag'due south background.

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

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

The near common degrees used for gradients are:

  • 0deg from superlative to lesser
  • 90deg from left to right
  • 180deg from lesser to elevation
  • 270deg from right to left

The higher up degrees each stand for with to top, to right, to bottom and to left, respectively.

          section{   background-prototype: linear-gradient(to left,pink,orange);         }

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

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

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

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

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

Determination

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

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

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

Accept fun with your designs and happy coding!