Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set background-image for the body element using CSS?
CSS (Cascading Style Sheets) is a powerful tool for designing the visual appearance of a website. The background-image property is one of the many features in CSS, which is used to set the background image using the background-image property.
In web development, the background image is an important part of the overall design of a website. The default background of the body element in HTML is white, but with a few lines of CSS code, the background of a webpage can be changed to any image.
Setting background-image in CSS
Setting a background image is a great way to enhance the visual appeal of a website, and it can be easily done using CSS with the body element. It creates a unique and fabulous look and gives the website a professional touch. Here, we will learn how to set a background image for the body element using CSS.
Basic Syntax
The background image for the body element is set using CSS with the help of the below syntax −
body {
background-image: url('path to the image.jpg');
}
The above syntax sets the background image of the body element to the image located at "path/to/image.jpg". The url() function is used to specify the path of the image.
Set background-image Using the Body Element
Now, we will learn the easy steps that can follow to set a background-image for the body element and make the website stand out.
Step 1: Choose an Image
Before starting to add the background image to the website using a body element, we need to select an image. The image can be a photograph, a graphic, or a pattern.
Step 2: Add the Image to HTML
In this step the image is added to the HTML code. For doing this, use the following code.
<body style="background-image: url(https://www.tutorialspoint.com/dip/images/einstein.jpg);">
OR
<style>
body {background-image: url("https://www.tutorialspoint.com/dip/images/einstein.jpg");}
</style>
Step 3: Style the Background Image with CSS
After adding the image to HTML code, we style the image using CSS. The position and size of the image is adjusted using the following code.
body {
background-size: cover;
background-repeat: no-repeat;
}
We have used background-size property to scale the image which covers the entire background, while 'no-repeat' ensures that the image is not repeated.
Step 4: Combining the HTML and CSS Code
Example
Here, we will combine the HTML and CSS to set background-image
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://www.tutorialspoint.com/dip/images/einstein.jpg');
background-repeat: no-repeat;
background-size: cover;
}
h1,h3{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<h3>Set Background image for the body element</h3>
</body>
</html>
For further customizing the background image, additional CSS properties such as opacity, background-position and background-attachment etc. can be used.
Conclusion
Setting the background image for the body element of the website is a simple but effective way. By following the above steps, you can easily add an image to the website and style it to suit needs.
209 Views
