Tutorial

How To Add a Background Image to the Top Section of Your Webpage With HTML

Updated on August 9, 2021

Senior Manager, DevEd

How To Add a Background Image to the Top Section of Your Webpage With HTML

In this tutorial we’ll learn how to use a <div> container to structure the top section of the webpage. We will use the style attribute to specify the height of our <div> container, apply a background image, and specify that the background image should cover the entire area of the <div> container.

Before we get started, we’ll need a background image. You may download and use our demonstration site’s background image for the purpose of the tutorial, or you can choose a new image. (For a refresher on how to add images to webpages using HTML, please visit our tutorial HTML Images from earlier in this tutorial series).

Once you’ve chosen your background image, save the image in your images folder as background-image.jpg.

Next, paste the highlighted code snippet into your index.html file below the opening <body> tag and above the closing </body> tag:

. . .
<body>
<!--First section-->
  <div style="background-image: url('Image_Location'); 
  background-size: cover; height:480px; padding-top:80px;">
  </div>
</body>
...

Make sure to switch the text that says Image_Location with the file path of your image and don’t forget to add the closing </div> tag.

Note that we have added the comment <!--First section--> to help organize our HTML code. A comment is a piece of code that is ignored by the browser. Comments are used to help explain or organize code to developers. They are created with the opening tag <!-- and the closing tag -->.

We have also specified the height to 480 pixels and padding-top to 80 pixels, which will create 80 pixels of space between the top of the <div> element and any content we place inside. Note that you will not be able to see the effects of the padding-top value until we place content inside in the next step.

Save the file and reload it in the browser. You should receive something like this:

Background image in top section

Alternately, you can use a background color instead of a background image. To use a background color, replace the <div> element code snippet you just created with the following highlighted <div> element code snippet like this:

. . .
<body>
  <!--First section-->
  <div style="background-color: #f4bc01; height:480px; padding-top:80px;"> 
  </div>
</body>
...

Save the file and reload it in the browser to check your results. The background image should now be replaced with a container that is the same size but has a solid yellow color.

If you compare the <div> container on your site with the same <div> container on the demonstration site, you may notice that your webpage’s <div> container is surrounded by a small margin of white space. This margin is due to the fact that all HTML pages are automatically set to have a small margin by default.

To remove this margin, we need to add a style attribute to the opening <body> tag that sets the margin of the <body> element of the HTML page to 0 pixels. Locate the opening <body> in your index.html file and modify it with the highlighted code:

<body style=“margin:0;”>

Save and reload the file in your browser. There should now be no white margin surrounding the top <div> container.

You should now know how to add a <div> container with a background image to structure the top section of a webpage.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


Tutorial Series: How To Build a Website with HTML

This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

About the authors
Default avatar

Senior Manager, DevEd

Open source advocate and lover of education, culture, and community.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
1 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

This is so good it helped me solve my exact problem. Great article.

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more