- The "background-image" property in CSS is used to set an image as the background of an element. It allows you to specify the URL or file path of the image you want to use. Here's the basic syntax:
selector {
background-image: url(path/to/image.jpg);
}
- In the example above, "selector" represents the CSS selector that targets the element you want to apply the background image to. The "url()" function is used to specify the path or URL of the image file you want to use. You can provide a relative or absolute path to the image file, or you can use a URL to an image hosted on the web.
- Here's an example that demonstrates how to use the "background-image" property with a relative path:
body {
background-image: url(images/background.jpg);
}
- In this case, the image file named "background.jpg" is expected to be in a folder called "images" located in the same directory as the CSS file.
- It's important to note that the "background-image" property only sets the image as the background and does not control its positioning or repetition. To further customize the background appearance, you can use additional properties such as "background-position", "background-repeat", and "background-size".
- Image is by default repeated in X and Y directions.
- Example 1: background-image: url("https://tinypng.com/images/social/website.jpg")
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
background-image: url("https://tinypng.com/images/social/website.jpg");
}
</style>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti perferendis
ipsa quae hic. Quas debitis libero eum dignissimos magnam in similique quaerat
voluptatem perspiciatis, aliquam doloremque ex alias eligendi numquam tenetur
animi assumenda autem pariatur tempore, sint, labore modi quia aperiam! Eaque
esse, mollitia optio omnis delectus beatae sint minus inventore ullam? Ullam
consectetur, nesciunt numquam dolorem neque doloremque vitae?
</div>
</body>
</html>
- Output:
- Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
background-image: url("./emoji.png"), url("./box.png");
}
</style>
</head>
<body>
</body>
</html>
- Output:
- Example 3:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
background-image: url("./box.png"), url("./emoji.png");
}
</style>
</head>
<body>
</body>
</html>
- Output:
No comments:
Post a Comment