How to create Background Image in HTML?

Master adding background images in HTML using CSS. Follow step-by-step examples for better visuals and responsive layouts.

Get Started free
How to create Background Image in HTML_
Home Guide How to create Background Image in HTML?

How to create Background Image in HTML?

Background images are essential to web design since they increase the visual attractiveness and user experience of a webpage. They have the ability to enhance the look, highlight important areas, or express branding.

HTML allows developers to make use of several methods to include background images into designs, ranging from simple HTML attributes to more dynamic methods using CSS. Understanding the syntax and techniques for configuring background pictures will ensure an identical display on various devices and browsers.

This guide explains how to use visual testing tools like BrowserStack Percy to verify design consistency. It also teaches various methods of adding background images to HTML using different syntax types.

How to Add a Background Image in HTML?

There are four different ways to add background images in HTML:

1. Background Attribute

In the past, HTML allowed the users to apply an image as the page background by using the background attribute in the <body> tag.  Although this approach is no longer advised for present web development as it is deprecated in HTML5.

Example:

<!DOCTYPE html>



<html>



<head>

  <title>BStackDemo Background</title>



</head>



<body background="background.jpg">



</body>



</html>

Output:

Add background images in HTML using background attribute

2. Inline CSS

Inline CSS allows the addition of a background image directly in an HTML element by using the style attribute.  This method works well for isolated style or quick prototypes, but it is not maintainable for larger applications.

Example:

<!DOCTYPE html>

<html>

<head>

  <title>BStackDemo Background</title>

</head>



<div style="background-image: url('background.jpg'); height: 150px; width: 47%;">



</div>

</html>

Output:

Add background images in HTML using Inline CSS

3. Internal Style Sheet (CSS)

Internal CSS is defined within a <style> tag in the <head> section of the HTML document. This method centralizes styling for a single HTML page and keeps the structure and design somewhat separated.

Example:

<!DOCTYPE html>



<html>

<head>

  <title>BStackDemo Background</title>



  <style>



    body {

      background-image: url('background.jpg');

      background-size: cover;

      background-repeat: no-repeat;

      background-position: center;

    }



    h1 {

      color: Green;

      text-align: center;

      padding-top: 200px;

    }

  </style>



</head>



<body>

  <h1>Welcome to BStackDemo</h1>

</body>



</html>

Output:

Add background images in HTML using internal style sheet.png

4. External CSS

Using an external CSS file is the most scalable and preferred process for modern web development. It separates structure and design effectively, allows the reuse of design styles, and improves maintainability.

Example:

HTML File:

<!DOCTYPE html>

<html>

<head>

 <title>BStackDemo Background</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <div class="main-section">

        <p>Background image is applied using external CSS</p>

    </div>

</body>

</html>

CSS File:

.main-section {

    background-image: url('background.jpg');

    background-size: auto;

    background-repeat: no-repeat;

    height: 400px;

}

Output:

Add background images in HTML using external CSS

Controlling Background Image Properties with CSS

The behavior of background images can be modified using CSS to satisfy the requirements of the design. Some of the most commonly used properties are:

  • background-repeat – Avoids repeating the background picture in the webpage.

Example:

background-repeat: no-repeat;
  • background-size – Defines the size of the background image

Example:

background-size: cover;
  • background-position – Specifies the position of the background picture

Example:

background-position: center;
  • background-attachment – Determines whether the background image scrolls with the page

 Example: 

background-attachment: fixed;
  • background-color – Alternative color if the background picture does not load

Example:

background-color: #f5f5f5;

Applying these properties will ensure that the image displays properly and does not hinder the readability of the contents.

Talk to an Expert

Best Practices for adding Background Images in HTML

The guidelines given below are suggested to maintain a visually uniform and efficient website:

  • To avoid delayed load times, use optimized images with high quality.
  • Use media queries to create background pictures in a responsive manner.
  • Combine images with fallback background colors for better accessibility.
  • In order to maintain the separation of concerns, avoid using inline styles in production.
  • Use semantic HTML and meaningful class names for better maintainability.
  • Use tools like ImageOptim or TinyPNG to reduce the size of background images.
  • Be mindful of the contrast ratios between background images and text for clear readability.

BrowserStack Percy Banner

Why perform Visual Testing for Background Images?

Visual discrepancies in background images are much harder to identify in functional testing. Variations in display between browsers, screen sizes, and resolutions can cause broken layouts, cropped images, or unreadable text.

This is particularly important for visually representative brand elements.

BrowserStack Percy is an automated visual testing tool that captures screenshots of how background images are displayed across multiple browsers and compares them pixel-by-pixel. By integrating Percy into the CI/CD pipeline, developers can:

  • Identify unexpected UI changes due to code updates
  • Check responsive behavior and mobile rendering
  • Maintain consistency with the brand throughout different releases
  • Remove the need for manual visual checks

Percy makes visual regression testing faster and easier by displaying distinct visual differences of changes. For teams that depend on background images, it ensures that the layout preferences are applied correctly and evenly across different environments.

If Percy is integrated into the deployment pipeline, it will take a snapshot of the application both before and after the code change, showing any visual changes. This ensures nothing is visually broken, particularly on elements like landing pages, hero sections, and banners.

Try Percy Now

Conclusion

Using background pictures in HTML requires a combination of CSS and HTML properties. Although CSS-based techniques are preferred for modern development, knowing various methods benefits in maintaining older projects and increases adaptability.

Applying CSS attributes to control background image behavior improves readability and responsiveness.

In today’s multi-browser, multi-device world, coding accuracy alone is insufficient. Platforms supporting visual testing, such as BrowserStack Percy, verify that design integrity is maintained, particularly when background images are used.

Tags
Visual Testing Website Testing

Get answers on our Discord Community

Join our Discord community to connect with others! Get your questions answered and stay informed.

Join Discord Community
Discord