Did you know that 80% of people remember what they see? So when it comes to designing your website, having an eye catching, unique background is essential.
But putting an image as a background in HTML can be tough, especially if you’ve never done it before.
Keep reading to learn how to put an image as a background in HTML.
How to Put an Image as a Background in HTML
To properly set a website background image, you’ll need HTML and CSS code. Luckily, these are easy to come by and you don’t need coding experience to follow this simple guide.
If you use a website builder, like WordPress, adding a background image is easy. In most cases, all you have to do is head over to the taskbar, click on the image icon, choose an image you love and there you go! You have an eye-catching background image for your website.
But not everyone uses a website builder, and some understanding of what goes on with the coding of your website never hurts. Use photo editing services for background remover of chosen photos.
HTML stands for Hypertext Markup Language. HTML is code that tells browsers, like Google, what to show from a website or webpage. CSS, on the other hand, stands for Cascading Style Sheets. It’s used to change the layout and/or the appearance of a webpage.
Step 1: Get Everything into One Place
As with any project, the very first thing you need to do is gather everything in a single space. The best way to do this is by creating a folder for your background image and your HTML and CSS code.
You can get free background images off the web. Alternatively, if you have the perfect image but it comes with a wonky background, you can remove it with this background remover guide.
Step 2: Write Your Code
Creating an HTML background image is quite simple. All you need is a text editor like NotePad (Window) or TextEdit (Mac). From there, type <!DOCTYPE html> at the top of the page.
The type in the following code:
<html>
<head>
<title>Page Title</title>
</head>
<div style=”background-image: url(‘ [image url]’);”>
</body>
</html>
From there, save your HTML file. In your code, remember to replace [image url] with the URL address of your chosen image.
Step 2 (Alternative): Using CSS to Set HTML Background Image
Simply repeat the steps above and type out a similar version of the code above. There are slight changes, though.
It should look like this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
background-image: url(“https://www.website.com/images/image_background.jpg”);
background-repeat:no-repeat;
background-size:cover;
}
</style>
</head>
<body>
</body>
</html/
From there, save your new HTML file.
Step 3: Review Your File
Now that you’ve created your HTML file, it’s time to make sure it actually works. Follow these steps:
- Right-click on the HTML file
- Select Open With and choose desired web browser
- Review the file
If you need to change anything, adjust the code in your original document.
HTML Background Image Tips
Now that you know how to put an image as a background in HTML, you can go ahead and make your website eye-catching and memorable.
To learn more about designing websites, check out this article on our website!
My name is Tom William a expert content creator and SEO expert having Proven record of excellent writing demonstrated in a professional portfolio Impeccable grasp of the English language, including press releases and current trends in slang and details.
