Adding images to your website can make your website look interesting to users. You can use the background images property to add images to your website. Adding a background image to your website is important to represent your brand. In this blog, you will learn everything about the background images, how to add them using HTML and CSS with the help of examples.
Table of Contents:
What is HTML?
HTML stands for HyperText Markup Language. It is defined as the language that is used to structure the content on the webpage. In simple words, it helps in defining the elements on the website, like headings, videos, and links.
Methods to Add Background Images
You can change the look of your website by adding background images to the webpage. There are two popular methods through which you can add background images to the website. Let us discuss each of them one by one:
1. Using the background Attribute in the <body> Tag
It is not recommended to use the background attribute in the <body> tag for adding a background image to the website because this background attribute is deprecated and does not work properly when used in HTML5.
Example:
Output:
Explanation: In this example, the background attribute of the <body> tag is used to add the background image. The important point is, this method does not work properly in modern browsers and produces repeated images as output.
Kickstart Your Journey in Web Development
Start Today
2. Using Inline CSS with the Style Attribute
It is the best way to add background images to a website. You can use the “style” attribute directly in HTML Tags to add CSS and background-image to add the background image in HTML.
Syntax:
background-image: url("image.jpg");
Example:
Output:
Explanation: In this example, you are adding the background image using inline CSS. This method provides you with more control over the images and background-repeat: no-repeat; makes sure that the images don’t repeat.
Controlling Background Behavior
After adding a background image, the next step is to control its behavior and appearance. For this, various CSS properties are there that help you to control the background image behavior. Let us understand each one of them in detail.
1. background-repeat
When you set the background image in HTML or CSS then the browser automatically repeats the image horizontally (left to right) and vertically (top to bottom) to fill the full space. In order to stop this behavior, you have to use the background-repeat property in CSS. Here are the values of the background-repeat property in CSS.
- repeat (default) – The image repeats in all directions to fill the space.
- no-repeat – The image displays once and doesn’t repeat itself.
- repeat-x – The image repeats only left to right.
- repeat-y – The image repeats only top to bottom.
Example:
Output:
2. background-size
The background-size property in CSS controls the size of your background image (how small or big it is). It helps you decide whether the image should stretch to fill the space, shrink to fit, or stay at its original size. This will help the developer in making sure that your image looks good on different screen sizes. Here are the values of the background-size property in CSS.
- cover: It fills the entire container
- contain: Fits the image entirely inside, may leave gaps
Example:
Output:
3. background-position
The background-position property in CSS decides where the background image will appear, like you can place the image in the center, at the top-left, bottom-right, or any other corner. This helps you to control the layout. You can set the background-position value as center, top, left, bottom, or right.
Example:
Output:
Best Practices
Adding background images can make your website more engaging, but it can slow down the performance of the website if not used properly. Here are some important points that you need to remember while working with the background image in HTML.
- Always use compressed images in formats like .webp, .jpg, or .png to reduce loading time.
- Setting a fallback background color is good practice because it helps you in times when the image fails to load or takes time.
- Do not use the background attribute in the <body> tag, because it is outdated and does not work properly in modern browsers.
- Use CSS properties like background-size: cover; and background-position: center; to make background images responsive.
- Name your image files clearly, because this helps in search engine optimization.
Get 100% Hike!
Master Most in Demand Skills Now!
Conclusion
Adding background images is a simple and powerful way to enhance the website’s look. It is important to know how to properly use background images in HTML and CSS, because it helps in making the webpage fast and good for SEO. Follow the best practices discussed above to create efficient websites.
HTML Background Images – FAQs
Q1. How do I insert an image in HTML?
HTML is used to define the structure of the webpage, and you can insert an image into the content by using the <img> tag in HTML.
Q2. How to get the image URL?
You can get the image URL by doing a right-click on the image, then selecting the “Copy image address” option.
Q3. What is CSS?
CSS stands for Cascading Style Sheet. It is the language used to style your HTML elements.
Q4. How to link CSS to HTML?
You can link your CSS file to the HTML by using the <link> tag inside the <head> section of your HTML.
Q5. How to make a table in HTML?
You can use the <table> tag along with <tr>(table row), <th> (table header), and <td> (table data) to create a table in HTML.