Home PHP JavaScript CSS WordPress APIs .htaccess Other How-To Useful Scripts What I Recommend
Posted on by Aleksandar Gichevski ()
For creating nice website design we must use images therefore CSS has a great property that allows us to insert the images on a specific position. Using background-position property in CSS we are able to set the initial position of a background image. Background of an element is the area that covers the space defined by width and height of that element. If you don't have defined these parameters and don't have any content in the element then the background image even added won't be shown because the element is not visible.

Position

By default if background-position is specified, the image is placed at top-left position (0,0) of the element. Depending of background image size if the image is bigger than the element, then only part from the background image will be shown, otherwise the background will be repeated by default in x and y until filling the full element content. By setting background-repeat:no-repeat; you specify that the background should not be repeated.

Property Values

Background Position accepts three types of input:
  • Length values (xpos, ypos)
  • Percentage values (x%, y%)
  • Keywords (top, right, bottom, left, center)
Property Type Values Description
Length Values xpos ypos The first value is horizontal position-x and second value is verical position-y. Top left corner is (0,0) and bottom corner depends on the element width and height. The length values can be set in any CSS unit. If you specify one length value, the other value will be 50% (center).
Percentage Values x% y% The first value is horizontal position-x and second value is vertical postion-y. Top left corner is (0%, 0%) and bottom corner is (100%, 100%). If you specify one percentage value, the other value is set to 50% (center).
Keywords left top left center left bottom right top right center right bottom center top center center center bottom Using keywords you are able to specify the position of the background. There are 5 main keywords that can be combined into background-position property. If you speicfy one keyword, the other value is set to "center" by default.
Combining these 3 types in 1 statement was not possible before releasing CSS 2.1. From then we can mix these 3 types and specify in background-position something like:
.element{
   background-position: 25px top;
}

Compatibility

Background Position property is available from CSS 1.0 and it's implemented by all major browsers. All property types work perfectly in Internet Explorer, Firefox, Safari, Opera and Chrome.

Demo

CSS Property: Result:
background-position:
  left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
50% 50%
25% 75%
10px 200px
50px 50px
background-position: left top;

Other Posts You Might Like

Get a fast, free website audit


Enter your URL below to get full in-depth SEO report and tips.

‚Äč

Useful Scripts

Most Popular Posts

Recent Posts

June 14th, 2014
Website Optimization Using Gzip Compression

June 10th, 2014
Google Search AutoComplete API

May 14th, 2014
What is a Tag Cloud and How to Calculate it by Formula

March 27th, 2014
Error writing file /tmp (errcode 28) Solved!

February 15th, 2014
Fixed CSS & HTML Navigation Bar

February 9th, 2014
Benchmark Your Server (CPU, File IO, MySQL) with SysBench

February 8th, 2014
JavaScript Array Basics

January 29th, 2014
JVZoo IPN API in PHP

January 25th, 2014
Payoneer Debit Card for Freelancers to receive money online

January 24th, 2014
How HTML Color Codes are generated?

Read Latest Posts directly on Facebook

Archive