Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
CSS Background Properties
CSS background properties help us style the background of elements. The CSS background property is a shorthand for specifying the background of 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 CSS background property is as follows−
Selector {
background: /*value*/
}
Example
The following examples illustrate CSS background property −
<!DOCTYPE html>
<html>
<head>
<style>
#main {
margin: auto;
width: 300px;
background-image: url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#im {
height: 200px;
width: 200px;
background-image: url("https://www.tutorialspoint.com/images/css.png");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div id="main">
<div id="im"></div>
</div>
</body>
</html>
Output
This gives the following output −
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/hcatalog/images/hcatalog-mini- logo.jpg"),url("https://www.tutorialspoint.com/hbase/images/hbase-mini-logo.jpg"),url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 10% 10%, 40% 40%, 90% 10%;
}
</style>
</head>
<body>
</body>
</html>
Output
This gives the following output
Updated on: 2020-01-06T07:53:52+05:30
2K+ Views
Advertisements