The background-image property in CSS is used to set an image as the background of an element. You can reference images from the internet or your local file system. Along with background-image, there are several other properties to consider for better control over how the background image appears on the webpage.
Example 1: Referencing an Image from the Internet
body { background-image: url('https://example.com/image.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; }
1. url('https://example.com/image.jpg'): This references the image from a URL on the internet.
2. background-repeat: no-repeat;: Ensures the image is not repeated.
3. background-size: cover;: Scales the image to cover the entire element without distorting it. The image might be cropped to fit the element.
4. background-position: center;: Centers the image within the element.
5. background-attachment: fixed;: Fixes the image in place so it doesn't move when the user scrolls.
Example 2: Referencing an Image from the Local File System
#banner { background-image: url('../images/banner.jpg'); background-repeat: no-repeat; background-size: contain; background-position: top; background-attachment: scroll; }
1. url('../images/banner.jpg'): This references an image located in the images folder, one level up from the current CSS file's location.
2. background-repeat: no-repeat;: Prevents the image from repeating.
3. background-size: contain;: Scales the image to fit within the element without cropping. The entire image is visible but might not cover the whole element.
4. background-position: top;: Aligns the image to the top of the element.
5. background-attachment: scroll;: The background image scrolls with the rest of the content.
palace.jpg
backgroundImage.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Background Image Examples</title> <style> /* Apply a background image from the internet to the body */ body { background-image: url('../../images/palace.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; background-color: #f0f0f0; /* Fallback color */ } h1, p{ color: darkblue; font-size: 30px; } </style> </head> <body> <header class="banner"> <h1>Welcome to My Website</h1> </header> <section> <p>This section demonstrates how to use background images in CSS, both from an internet source and from a local file.</p> </section> </body> </html>
Adjust the url path accordingly in your html file.
background-image: url('../../images/palace.jpg');
Above snippet generate below screen.
Previous Next Home
No comments:
Post a Comment