The New Feature of Background Position in CSS

Learn Something New in CSS (Series)

Hello everybody. I assume that most of you have used or have experience with the CSS background-position property, but perhaps what you didn’t know, is the positioning offset of background images.

Image for post
Image for post

Introduction

In background-position, prior to CSS3, you had to set the position from the top left of the element.
For Example:

div{
background-position: 20px 40px;
/*20px from left & 40px from top*/
}

The problem was that it wasn’t possible to determine exact position from a different reference point, for example from bottom/right. You could only start from left top!

We used to believe we could only set values such as: background-position: right bottom, or background position:70% 80% (70% from left, 80% from top), but that we couldn’t set a value of 20px from right and 20px from the bottom, for example.

Image for post
Image for post

Say Hello to the New Background Position

To solve this issue, CSS3 provided us with the option to determine a reference point for our positioning, and by doing so, determine our 0,0 point.

Image for post
Image for post

How does It work?

Instead of writing only 2 values (horizontal and vertical point from left top), CSS3 now allows us to write the starting point of the horizontal and vertical positions, along with their offsets, for example: right 10px bottom 20px (4 values altogether).

Let’s create an example:

First create an empty DIV with some styles:

HTML

<div class="box">
</div>

CSS

.box{   
width:300px;
height:300px;
background-color:#ddd;
padding:10px;
border:solid 3px #333;
border-radius:10px;
}

Now we’ll add a background-image with a fixed size, while using the background-size property.

.box{   
background:url(images/image.jpg) no-repeat;
background-size:150px 150px;
}

And finally, we’ll add the New Background Position value.

First we set the horizontal starting point, for example: “right”. Then we can set the distance we want from that position, for example 20px.
Second, we set the vertical starting point, for example: “bottom” and the distance we want from that position, for example 40px.

CSS new background-position

.box{ background-position :right 20px bottom 40px;}

This is what we will get:

Image for post
Image for post

Live Example

Yay! we did it.

You can also make a box with multiple background images, with every image positioned in another corner, as in this example.

Support

  • Works in all new browsers!
  • IE — works from IE9 and above.

See support on CSS background-position edge offsets at caniuse

That’s all,

I am Elad Shechter, Web Developer specializing in CSS & HTML design and architecture, working at Investing.com.

More CSS post I wroted:
Say Hello to Background-Origin and Background-Clip!
CSS Position Sticky — How It Really Works!
CSS Architecture for Multiple Websites With SASS
Responsive Design Best Practices for Big Projects
Becoming a CSS Grid Ninja!

You can contact or follow me:
My Twitter
Facebook
LinkedIn

You Can find me in my Facebook groups:
CSS Masters
CSS Masters Israel

CSS & HTML Expert

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store