How Can I Position a Background Image a Specific Distance from the Right in CSS?

Positioning Background Images from the Right Using CSS

Question:

Can you align a background image a specific distance from the right edge of its parent element using CSS?

Example:

To place an image 10 pixels from the left, you would use the following CSS:

#myElement {
    background-position: 10px 0;
}

Answer:

The CSS3 background-position property allows you to offset background images from the right edge of an element:

/* Offset the element 10px from the right */
background-position: right 10px top;

Note that:

• This feature is not supported in IE8.
• It is widely supported in modern browsers, including Chrome, Firefox, and Edge.

You can check browser compatibility at Can I Use: https://caniuse.com/background-position-shorthand

Update:

As of now, this feature is supported in all major browsers, including mobile browsers.

The above is the detailed content of How Can I Position a Background Image a Specific Distance from the Right in CSS?. For more information, please follow other related articles on the PHP Chinese website!