CSS Background Image: HTML Code Example

Dec 15, 2021  19483 seen

CSS Background Image: HTML Code Example

CSS Image Background

The background CSS property is used to define element background effects. The background image should be chosen to complement the color of the text. A poorly designed and unreadable web page can be caused by an ineffective combination of text and background image.

There are five CSS background properties that have an impact on HTML elements:

  1. background color 

  2. background image 

  3. background-position

  4. background affection

  5. background-repeat

 

CSS Background Image With HTML Example Code

What a user sees on a website has an impact on how satisfied they are with their user experience. It will also have an impact on how easily they can navigate the entire site. Modern browsers support a variety of image file formats, including .jpg,.png,.gif, and.svg.

We will discuss how to add images to your HTML code and customize them to make them look better.

 

Background Image Syntax

background image

The first step is to create a resource directory in which to store the images you intend to use in your project. For example, in the project we are working on, we can create an images folder and add an image that we want to use. You can use the background-image CSS property to place an image behind any HTML element you want. This can be the entire page or just a specific part of the page, such as a section element, as shown in the following example.

By writing the following code, you can add the background image to your CSS file section tag:

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

 

Let's understand what's going on there:

  • "images/sunset.png" is the image's path inside the parentheses. This instructs the browser on which URL to retrieve.

  • The path in this example is a relative path, which means it is a local file relative to our project and current working directory, rather than a web address. We can also use an absolute path to add images, which is a full web address that begins with a domain URL (http://www.).

  • Although using quotes is a good practice, we can omit them, so background-image: url(images/sunset.png) works just as well.

  • Don't forget to include the semicolon!

 

How to Set Background Position

html css image position

After adding a background image and preventing it from repeating, we can improve its position within the tag's background to control how it appears. To accomplish this, we'll make use of the background-position property. The selector accepts two values. The first is the horizontal position, also known as the x-direction (how far across the tag). The second is the vertical position, also known as the y-direction (how far down the tag).

The image will be moved 20 pixels wide and 30 pixels down the containing tag as a result of this. Instead of pixels, we can position the image to the right, left, top, bottom, or center of the tag by using keywords like right, left, top, down, or center.

 

section {
    background-position: right center;
        }

 

This positions the image 20 percent across the tag and 40 percent down the tag. We've seen values used in combination so far, but we can also specify a single value, such as background-position: 20px; or background-position: center; or background-position: 20 percent ;, which applies to both directions.

 

How to Resize a Background Image

image html css tag

The background-size property can be used to control the size of the background image.

It accepts two values, just like the previous properties. One for horizontal (x) and one for vertical (y) dimensions. 

We can use pixels, like so:

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

If we don't know the exact width of the container we're storing the image in, we can give the property a set of specific values.

  • background-size: cover; resizes the background image so that it covers the entire tag's background space, regardless of tag width. If the image is too large and has a larger ratio to the tag it is in, it will be stretched and thus cropped at the edges.
  •  background-size: contain; as the name implies, it contains the image. It will ensure that the entire image is visible in the background without cropping any of it out. If the image is much smaller than the tag, there will be empty space, which will cause it to repeat to fill it up, allowing us to use the background. -repeat: no-repeat; the previously mentioned rule.
 

How to Use the Background Attachment Property

image tag

We can control where the background image is attached with the background-attachment property, i.e. whether the image is fixed in the browser or not. Background-attachment: scroll is the default, and it means that the background image stays with its tag and follows the natural flow of the page, scrolling up and down as it scrolls up and down. The background-attachment: fixed; value is the property's second possible value. The background image will remain in the same position, lock onto the page, and lock onto the browser's viewport as a result of this.