Repeating Background Images
If your background image is smaller than the element, you can control its repetition using the background-repeat property. Values include repeat, repeat-x, repeat-y, and no-repeat.
HTML
<!DOCTYPE html> <html> <head> <style> body { background-image: url( 'https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png'); background-repeat: repeat-x; } </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