- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
The Background Shorthand Property in CSS
The CSS background shorthand property is used to define a background for an element. background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin and background-attachment together comprise the CSS background properties.
Syntax
The syntax of the CSS background property is as follows −
Selector { background: /*value*/ }
The value can be −
background-color − Set the background color
background-image − Set the background images
background-position − Set the position of the background images
background-size − Set the size of the background images
background-repeat − Set how to repeat the background images
background-origin − Set the positioning area of the background images
background-clip − Set the painting area of the background images
background-attachment − Set whether the background images are fixed or scrolls
Set the background color
The background color on a web page is set using the background property −
<!DOCTYPE html> <html> <head> <style> body { background: yellow; } </style> </head> <body> <h1>Demo Heading</h1> <p>I live in India.</p> </body> </html>
Set the background image
To set the background image, use the background property and place the image using the url() −
background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structure-algorithm.jpg") no-repeat;
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> body { background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structure-algorithm.jpg") no-repeat; } </style> </head> <body> <h2>Learning is fun</h2> </body> </html>
Set the position of the background image
Use the background property to set the background image position on a web page. In this example, the image is placed in the center −
background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structure-algorithm.jpg") no-repeat center;
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> body { background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structure-algorithm.jpg") no-repeat center; } </style> </head> <body> <h2>Learning is fun</h2> </body> </html>
Repeating images with the background property
The following examples illustrate CSS background property. In this example, we have set the background image to repeat using the background-repeat under the background shorthand property −
background: linen url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") repeat 40% 20%;
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> body { background: linen url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") repeat 40% 20%; } div { padding: 100px; background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/green/images/logo.png") no-repeat left; } </style> </head> <body> <h2>Learn</h2> <ul> <li>Java</li> <li>C#</li> <li>Android</li> <li>iOS</li> <li>C++</li> <li>C</li> </ul> <div></div> </body> </html>