askvity

How do I add a background image to a section tag in HTML?

Published in CSS Backgrounds 4 mins read

You can add a background image to a <section> tag in HTML using CSS, either inline, in an internal <style> tag, or in an external CSS file. The most common and recommended approach is to use an external CSS file. Here's how to do it:

1. Using Inline CSS (Not Recommended)

This method directly applies the CSS style within the <section> tag itself.

<section style="background-image: url('image.jpg');">
  <p>This is a section with a background image.</p>
</section>

Explanation:

  • style="background-image: url('image.jpg');": This attribute sets the background-image property to the specified URL. Replace 'image.jpg' with the actual path to your image.

Note: While this works, it's generally discouraged for larger projects due to poor maintainability and separation of concerns.

2. Using Internal CSS (For small projects or testing)

This involves placing the CSS code within <style> tags inside the <head> section of your HTML document.

<!DOCTYPE html>
<html>
<head>
  <title>Background Image Example</title>
  <style>
    section {
      background-image: url('image.jpg');
    }
  </style>
</head>
<body>

  <section>
    <p>This is a section with a background image.</p>
  </section>

</body>
</html>

Explanation:

  • <style>: The tag that contains the CSS rules.
  • section { ... }: This is a CSS rule that targets all <section> elements on the page.
  • background-image: url('image.jpg');: This sets the background image for all targeted section elements.

3. Using External CSS (Best Practice)

This is the preferred method for most projects. You create a separate CSS file (e.g., styles.css) and link it to your HTML document.

a. Create styles.css:

section {
  background-image: url('image.jpg');
  /* Optional properties for better appearance */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-size: cover;      /* Scales the image to cover the entire section */
  background-position: center;   /* Centers the image */
  height: 500px;                /* Specify a height for the section so the background is visible */
}

b. Link styles.css in your HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Background Image Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <section>
    <p>This is a section with a background image.</p>
  </section>

</body>
</html>

Explanation:

  • <link rel="stylesheet" href="styles.css">: This line links the external CSS file (styles.css) to your HTML document. Make sure the path to styles.css is correct relative to your HTML file.
  • background-repeat: no-repeat;: Prevents the background image from tiling if it's smaller than the section.
  • background-size: cover;: Scales the image to cover the entire section, potentially cropping parts of the image. Other options include contain (which ensures the entire image is visible, potentially leaving empty space) and specific pixel or percentage values.
  • background-position: center;: Centers the image within the section. Other options include top, bottom, left, and right, or combinations like top left.
  • height: 500px;: Set an appropriate height for the section so the image is visible. If the section's content doesn't naturally create height, the background image may not be visible.

Additional CSS Properties for Background Images:

You can use other CSS properties to further control the appearance of your background image:

Property Description
background-repeat Specifies how the background image should be repeated (e.g., repeat, no-repeat, repeat-x, repeat-y).
background-size Specifies the size of the background image (e.g., cover, contain, auto, pixel values).
background-position Specifies the position of the background image within the element (e.g., center, top, bottom, left, right, pixel values, percentage values).
background-attachment Specifies whether the background image should scroll with the content or be fixed (e.g., scroll, fixed, local).
background-origin Specifies the origin of the background image (e.g., padding-box, border-box, content-box).
background-clip Specifies how far the background should extend within the element (e.g., border-box, padding-box, content-box, text).
background-color Sets a fallback background color if the image is not available or is transparent. Good practice to set this.

Example with multiple properties:

section {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #cccccc; /* Fallback color */
  height: 500px;
}

Remember to replace 'image.jpg' with the correct path to your image file. Choosing the external CSS method ensures a cleaner and more maintainable codebase.

Related Articles