• Home
  • About Mitch
  • Speaking
  • Articles
  • Contact
  • Home
  • About Mitch
  • Speaking
  • Articles
  • Contact

Digital Strategist

WordPress Developer

Content Creator

Unapologetic Punk

Mitch Canter

  • X
  • Bluesky
  • GitHub
  • Twitch
  • YouTube
  • LinkedIn
Design

“Cover Me!” Background-Size CSS for Large Image Backgrounds

CMDR Mitchcraft

Reading time: 2 minutes

While working on a few new projects recently, I needed a way to have a background image span a container (horizontally and vertically).  I tried every measure of background-size you could think of:

background-size: 100% auto;

This worked, at least until you got to smaller resolutions.  Then, the image would show the background color.

So, I tried to work out when that happened and use:

background-size: auto 100%;

But it was such a hassle to figure out when the exact break point of the image would be.

Finally, looking through some documentation last night I stumbled upon the answer.  And it’s worth sharing because It has some amazing effects if you do it right (and it’s entirely done with CSS!).

Background-size: cover

I poured through the W3C documentation and discovered that background-size has a boolean ‘cover’ option.  Instead of setting numerical values, you can have the background scale accordingly and still make sure that no color is bleeding through from the back.

A typical “covered” background image looks like this:

img{ background: url(images/background.jpg) no-repeat center center; }

Set the background image, have it to not repeat and center in the frame.

The “scrolling frame”

One of the popular visual effects in web design lately is this “scrolling frame” concept.  Imagine you have a photo, stationary on a wall.  You then cut out a hole in a piece of paper and put it over the photo.  Moving it up and down keeps the photo in one spot, but the “frame of reference” changes, so you may only see bits and pieces of the photo through the frame.   It’s an amazing effect, and it can be done with one line of CSS:

img{ background: url(images/background.jpg) no-repeat center center fixed; }

A good example can be found in the Sonnet theme by ThemeBucket.  Scroll down until you see the “blockquote” area shown below.

Beware the Bandwidth

The nice thing about these full screen backgrounds is the visual effect it brings, but make sure you’re optimizing those images.  No one wants to download a single image (or two or three or ten images) that are megabytes of data.  It’ll slow down your site and will hurt your page-ranking.

  • WordPress 3.4 Goes Green!

    WordPress 3.4 Goes Green!

    Reading time: 2 minutes

    …not like eco-friendly.  I mean, they’re already eco-friendly; a journal that doesn’t use paper? Can’t get any more green than that! No, it’s green like Grant Green, the incredible Jazz musician. Look below for the change list, taken from the official site: For Users The biggest change in 3.4 is the theme customizer which allows…

    WordPress
  • The Toolbox: 4 WordPress Plugins I Can’t Live Without

    The Toolbox: 4 WordPress Plugins I Can’t Live Without

    Reading time: 2 minutes

    Whenever I speak at conferences, attend meetups, or even just causally mention WordPress in conversation, there’s one question that comes up in nearly every conversation I have: What WordPress plugins do you recommend? That list is constantly in flux – a new plugin will be developed that replaces an old one, or an old one…

    WordPress