--- title: "Background Position using CSS3" description: "In this blog I am explaining the background position using CSS3.The background-position property; as its name articulate, assent you to control the pl" author: "Vijay Shukla" published: 2013-01-08 updated: 2014-09-18 canonical: https://www.mindstick.com/blog/429/background-position-using-css3 category: "css-css3" tags: ["css-css3"] reading_time: 2 minutes --- # Background Position using CSS3 In this blog I am explaining the [background](https://www.mindstick.com/articles/65/how-to-change-background-color-of-tab-control-in-c-sharp) position using CSS3.The background-position [property](https://www.mindstick.com/blog/205/property-notification-in-c-sharp); as its name articulate, assent you to [control](https://www.mindstick.com/blog/197/asp-dot-net-repeater-control) the [placement](https://answers.mindstick.com/qa/111373/what-are-the-benefits-of-taking-advanced-placement-ap-courses) of the background. The following [shows](https://yourviews.mindstick.com/view/81339/boris-johnson-shows-the-way-of-governance-to-big-bro-donald-trump) the syntax of the background- position property. Syntax: ``` Background-position :[< percentage>|] | [[top|center|bottom]||[left|center|]] ``` ##### [< percentage>|] That the [values](https://www.mindstick.com/forum/327/sum-textbox-values) may be a percentage or [length](https://www.mindstick.com/interview/1915/what-is-the-difference-between-char_length-and-length) values. ##### [[top|center|bottom]||[left|center|]] That either one or two [keywords](https://www.mindstick.com/articles/12899/how-to-spot-if-you-re-optimizing-for-the-wrong-keywords) values may be providing. ##### Example: I am creating a [class](https://www.mindstick.com/blog/165/generic-class-in-c-sharp) [named](https://answers.mindstick.com/qa/44918/what-is-a-no-day-yet-named-motion) ClassDiv and property. ```   .ClassDiv    {        width:200px;        height:200px;        border: 1px solid red;        background-image:url('mindstick.jpg');        background-repeat:no-repeat     }   ``` This code will written in #position{} id. ```     background-position:30% 30%;    background-position: 30px 30px;    background-position:top left;    background-position:top center;    background-position:top right;    background-position:right center;    background-position:bottom right;    background-position:bottom center;    background-position:bottom left;    background-position:left center;    background-position:center center; ``` This code will written tag. \ ```
position:30% 30%
position:30px 30px
position:top left
position:top center
position:top right
position:right center
position:bottom right
position:bottom center
position:bottom left
position:left center
position:center center
``` \ ##### Output: ![Background Position using CSS3](https://www.mindstick.com/blogs/3dd56b59-c16a-4179-8f85-658e2900595b/images/f9e2af3f-0f83-4e12-9750-5da9ee3ed75b.png) --- Original Source: https://www.mindstick.com/blog/429/background-position-using-css3 Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.