Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
background-position

6 Articles
{
,

}
Direct link to the article Moving Backgrounds
animation background-image background-position

Moving Backgrounds

We often think of background images as texture or something that provides contrast for legible content — in other words, not really content. If it was content, you’d probably reach for an <img> anyway, accessibility and whatnot.

But there are …

Avatar of Saleh Mubashar
Saleh Mubashar on Feb 9, 2023
Direct link to the article Single Element Loaders: The Dots
background-position gradients loader mask

Single Element Loaders: The Dots

We’re looking at loaders in this series. More than that, we’re breaking down some common loader patterns and how to re-create them with nothing more than a single div. So far, we’ve picked apart the classic spinning loader. Now, …

Avatar of Temani Afif
Temani Afif on Jun 17, 2022 (Updated on Feb 15, 2024)
Direct link to the article Cool Hover Effects That Use Background Properties
background background-position hover links

Cool Hover Effects That Use Background Properties

A while ago, Geoff wrote an article about a cool hover effect. The effect relies on a combination of CSS pseudo-elements, transforms, and transitions. A lot of comments have shown that the same effect can be done using background …

Avatar of Temani Afif
Temani Afif on Apr 27, 2022 (Updated on May 26, 2022)
Direct link to the article Moving Backgrounds With Mouse Position
background background-position custom properties JavaScript

Moving Backgrounds With Mouse Position

Let’s say you wanted to move the background-position on an element as you mouse over it to give the design a little pizzazz. You have an element like this:

<div class="module" id="module"></div>

And you toss a background on it:

.module 
…
Avatar of Chris Coyier
Chris Coyier on Oct 4, 2018
Direct link to the article Focusing a `background-image` on a Precise Location with Percentages
background-image background-position

Focusing a `background-image` on a Precise Location with Percentages

Let’s say you have an element with a background-image, where only part of the image is visible, because the image is bigger than the element itself. The rest is cropped away, outside the element.

Now you want to move …

Avatar of Jay Sitter
Jay Sitter on Apr 17, 2017 (Updated on Nov 30, 2018)
Direct link to the article background-position
background background-position

background-position

The background-position property in CSS allows you to move a background image (or gradient) around within its container.

html {
  background-position: 100px 5px; 
}

It has three different types of values:

  • Length values (e.g. 100px 5px)
  • Percentages (e.g. 100%
…
Avatar of Chris Coyier
Chris Coyier on Feb 17, 2015 (Updated on Jun 2, 2021)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top