- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Setting Background Position in CSS
The CSS background-position property is used to set an initial position for a background image relative to the origin.
Syntax
The syntax of CSS background-position property is as follows −
Selector {
background-position: /*value*/
}The following examples illustrate CSS background-position property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 30px;
padding: 100px;
background-image: url("https://www.tutorialspoint.com/images/C-programming.png"), url("https://www.tutorialspoint.com/images/Swift.png"), url("https://www.tutorialspoint.com/images/xamarian.png");
background-repeat: no-repeat;
background-position: 15% 20%, top, right;
border: 1px solid;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>Output
This gives the following output −
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 20px;
padding: 80px;
background-image: url("https://www.tutorialspoint.com/images/dbms.png"), url("https://www.tutorialspoint.com/images/Operating-System.png");
background-repeat: no-repeat;
background-position: 0 0, bottom right;
background-color: lemonchiffon;
}
</style>
</head>
<body>
<p>This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. </p>
</body>
</html>Output
This gives the following output −
Updated on 08-Jan-2020 07:52:56
- Related Questions & Answers
- Setting Background Position using CSS
- Setting Background Image using CSS
- Setting up Background Color in CSS
- Setting up Background Color using CSS
- Usage of background-position property in CSS
- Set the Background Image Position with CSS
- Specify position of the background images with CSS
- Perform Animation on background-position property with CSS
- Setting Background color for Tkinter in Python
- Setting Line Height in CSS
- Setting Color Property in CSS
- CSS background property
- CSS Background Properties
- Background Repeat in CSS
- Background Attachment in CSS
Advertisements