Positioning the Background Image
The background-position property allows you to position the background image within the element. You can use keywords like top, bottom, left, right, or specific coordinates.
HTML
<!DOCTYPE html> <html> <head> <style> body { background-image: url( 'https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png'); background-position: center; background-repeat: no-repeat; } </style> </head> <body> <h1>Welcome to w3wiki</h1> </body> </html> |
Output
How to Add Background Image in CSS ?
Adding a background image to a webpage can enhance its aesthetic appeal and make it more engaging for users. CSS (Cascading Style Sheets) provides several properties to easily set and customize background images. In this article, we will explore different approaches to add background images in CSS.
Table of Content
- Using the background-image Property
- Setting Background Size
- Positioning the Background Image
- Repeating Background Images