Full Stack Web Development Internship Program
- 29k Enrolled Learners
- Weekend/Weekday
- Live Class
(11250)
Adding a Background Image in HTML is one of the most common tasks when you are working on Web Designing. The following pointers will be covered in this article:
Table of Contents:
- Background Image In HTML
- Understanding HTML Background Images
- What is an internal style sheet? How to Internal style sheet?
- CSS background-image Property
- FAQs
Moving on with this article on Background Image In HTML
Background Image In HTML
There are various ways in which images can be added to a web page to make it look captivating & appealing. One of such ways is adding background image. In this blog we will understand how we can add background images in a webpage using HTML & CSS. The most common & simple way to add a background image is to use the background image attribute inside the <body> tag.
Example
<!DOCTYPE html> <html> <body background="edureka.png"> <h1>Welcome to Edureka</h1> <p><a href="https://www.edureka.co">Edureka.co</a></p> </body> </html>
The background attribute which we specified in the <body> tag is not supported in HTML5. Using CSS properties, we can also add background image in a webpage.
Let us first understand how we can add background image in a webpage using CSS. Later moving ahead, we will look at different CSS properties using which we can change the look & feel of the webpage.
Understanding HTML Background Images
The HTML background image enhances the user experience by making the web page interactive and visually appealing.
Ways to Add HTML Background Image
By using Background-image Attribute Inside Body Tag.
By using HTML style Attribute.
Let’s first see how to add an HTML background image with the help of Background- image Attribute inside the body tag.
Syntax;
<body background =”image.png”></body>
For example, add a background image to the webpage.
By using the background-image attribute inside the body tag
HTML:
!DOCTYPE html>
<html lang="en">
<head>
<title>Background Image</title>
</head>
<body background=
"https://i.pinimg.com/564x/98/47/07/984707ecb80822c48081d6662d5f492b.jpg ">
<h1 style="color: RGB(17, 0, 128);
text-align: center;">
Welcome to Edureka!
</h1>
</body>
</html>Output:
By using the HTML style attribute,
Syntax;
<div style =” background-image : url (‘img.jpg’);”></div>
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background HTML Image</title>
</head>
<body>
<h3 style="color: yellow ; text-align: center;">
Welcome to EDUREKA!
</h3>
<div style="background-image: url('https://i.pinimg.com/564x/98/47/07/984707ecb80822c48081d6662d5f492b.jpg');">
<p>Learn HTML with EDUREKA!<p>
<p>Learn HTML with EDUREKA!<p>
<p>Learn HTML with EDUREKA!<p>
<p>Learn HTML with EDUREKA!<p>
<p>Learn HTML with EDUREKA!<p>
<p>Learn HTML with EDUREKA!<p>
<p>Learn HTML with EDUREKA!<p>
<p>Learn HTML with EDUREKA!<p>
<p>Learn HTML with EDUREKA!<p>
<p>Learn HTML with EDUREKA!<p>
</div>
</body>
</html>
Background Cover
Background cover is used When you have to cover the full web screen with the image in the background, irrespective of the size of the screen. Because of background cover image can adapt any screen size.
Syntax;
background-size cover ; background-attachment: fixed ;
Example: background-size property implementation:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Image</title>
</head>
<body background=
"https://i.pinimg.com/564x/98/47/07/984707ecb80822c48081d6662d5f492b.jpg"
style="background-repeat: no-repeat;
background-size cover;
background-attachment: fixed;">
<h1 style="color: yellow;
text-align: center;">
Welcome to Edureka!
</h1>
</body>
</html>Output:
Background Stretch
Background scratch is used when you need to fit the image to the full screen of different screen sizes. It stretches the image to fit the full-screen size.
Syntax;
background-size: 100% 100%;
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Image</title>
</head>
<body background=
"https://i.pinimg.com/564x/98/47/07/984707ecb80822c48081d6662d5f492b.jpg"
style="background-repeat: no-repeat;
background-size cover;
background-attachment: fixed;">
<h1 style="color: yellow;
text-align: center;">
Welcome to Edureka!
</h1>
</body>
</html>Output;
What is an internal style sheet? How to Internal style sheet?
An internal style sheet is one of the methods used to style the HTML elements. In internal css, styling is done inside the HTML document itself. There is no need to make a separate file. Internal style is embedded under the style element, which is present in thesection of the HTML file. While using internal css, all the styling properties are mentioned in the
