About Background Image Position On The Right Side

If you want to adjust a non-repeated background image position aligned to the right, you can do this with calc() function like this:

1
2
3
4
5
6
.loading {
    background-image: url(loading.gif);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: calc(100% - 10px) center;
}

That is analogous to:

1
2
3
4
5
6
.loading {
    background-image: url(loading.gif);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: right 10px center;
}

Tips and Tricks Web Design CSS3

Also by me

Django GDPR Cookie Consent app

For Django websites that use cookies.

my dev product
Django 3 Web Development Cookbook - Fourth Edition
my book
Django 3 Web Development Cookbook

Learn how to build practical web projects with Django 3.
1st things 1st
my SaaS
Strategic prioritizer "1st things 1st"

Helps make difficult choices at ease.

For you and your best friends.