Home > Article > Web Front-end > How to set a background image for the body element using CSS?
CSS (Cascading Style Sheets) is a powerful tool for designing the visual appearance of your website. background-image property is one of the many features in CSS used to set a background image using the background-image property.
In web development, background images are an important part of the overall design of the website. The default background of the body element in HTML is white, but with just a few lines of CSS code, you can change the background of your web page to any image.
Setting a background image is a great way to improve the visual appeal of your website, and can be easily achieved through CSS and body elements. It can create a unique and wonderful look, adding a professional feel to the website. Here, we will learn how to set a background image for the body element using CSS.
Use the following syntax to set the background image of the body element through CSS:
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.
Now, we will learn some simple steps that you can follow to set a background image for the body element to make your website stand out more.
Before using the body element to add a background image to the website, we need to select an image. This image can be a photo, graphic, or pattern.
In this step, add the image to the HTML code. To do 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>
After adding the image to the HTML code, we style the image using CSS. Use the following code to adjust the position and size of the image.
body { background-size: cover; background-repeat: no-repeat; }
We use the background-size attribute to scale the image that covers the entire background, and "no-repeat" ensures that the image is not repeated.
Here, we will combine HTML and CSS to set the 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>
To further customize the background image, additional CSS properties can be used, such as opacity, background position, and background attachment.
Setting a background image for the body text elements of the website is a simple but effective method. By following the steps above, you can easily add images to your website and style them to suit your needs.
The above is the detailed content of How to set a background image for the body element using CSS?. For more information, please follow other related articles on the PHP Chinese website!