Making Background Images Play Nicely With iOS

I was testing my site on my iPhone, and my header was…not pretty.

Background Image Problems

I was using media queries and everything, but it was showing up all blown up and blurry.

@media only screen and (max-width: 800px) {
.site-header {
background-image:url(images/laptop-mobile.jpg);
background-position: fixed no-repeat center center;
background-position: fixed no-repeat center center;
-moz-background-position: fixed no-repeat center center;
-webkit-background-position: fixed no-repeat center center;
-o-background-position: fixed no-repeat center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
}

Super annoying.

The Internet told me that iOS (at least in previous versions) has had a problem with

position: fixed;

Okay. That’s fine, since it wasn’t parallaxing (that’s totally a word) on mobile anyway.

But getting rid of

position: fixed;

didn’t fix it. Why. Why? INTERNET. YOU ARE NOT COMING THROUGH.

So then I basically started trying every suggestion Google could throw at me, until – bliss! – this post on BrainHappy solved all my problems.

The Beckonweb mobile site - fixed!

Here’s my fix, modified slightly from the original:

.site-header {
background-image:url(images/laptop-mobile.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
min-height: 125px;
}

Yay! The Internet came through after all.

Also: waffles.

WordPress Swag!

It’s no surprise to anyone that I’m a huge fan of swag, and now I can support my swag habit and the WordPress community. And you can, too. Check out the WordPress Swag Store. The proceeds go toward offsetting the cost of providing free swag to WordCamps and WordPress meetups around the world. Yes, that’s right: your swag begets more swag. Everybody wins.

Evolution of WordPress

WordPress got its start way back in 2003 as a fork of the blogging platform b2, but it’s come a long way since then. Major milestones include:

  • The addition of plug-ins in 2004
  • Theme system and static pages in 2005
  • Widgets in 2007
  • Shortcode API and Dashboard Widgets in 2008
  • Image editing in 2009
  • Custom menus and multisite management in 2010
  • Post formats in 2011
  • Theme customizer in 2012

Tutorial: Using the Theme Customizer

Oh, Theme Customizer with Live Preview, where have you been all my life? The WordPress 3.4 update gives us the power to preview, tweak, and test-drive a new theme without applying it to our live site. 

 

Beck4 fig02

Want to learn more? Check out my tutorial on Peachpit.com!

Tutorial: Flexible Header Images

By now you already know that WordPress 3.4 has introduced a ton of great features (because you always perform core updates, right?). One of the coolest new features is support for Flexible Header Images. Remember in the dark ages of WordPress, when you had to crop your header image to fit in the predetermined header space? Now you get to decide how much header image you want, without having to touch any code.

Awesome, right? And it’s easy to get it to work with your theme.

Check out my article on Peachpit.com for a full tutorial!

Read the full tutorial over on Peachpit!

WordPress 3.3 is Out!

The folks at WordPress have an early holiday present for us: WordPress 3.3! Check out our image gallery to see some of what’s new:

The first hint that something new is afoot comes right after you run the update: instead of the usual “You’re running the latest version of WordPress” message, you’ll see a handy welcome screen that gives you an overview of all the new features in 3.3.

If you’ve been feeling ho-hum about the WordPress admin dashboard, get ready to celebrate. This update completely re-thinks the Dashboard UI, adding flyout menus, a persistent admin toolbar at the top of every screen, and help tabs everywhere you need them.

The post editing tools have been updated as well; one of the most significant is the media uploader, which now features a single icon instead of an icon for each content type. This makes perfect sense, and is a welcome change – though it may be jarring if you’re used to picking a content type before you upload! If you use Tumblr, you’ll be pleased to note that there’s now an easy way to import your Tumblog into WordPress. Hint: use a theme with Post Formats to make the transition as seamless as possible.

There have been some behind-the-scenes updates as well: permalink options have been updated, jQuery has been updated to 1.7.1, and there’s a new API for working with admin screens.

Have you updated yet? Get cracking! And let us know your thoughts on the new version in the comments.

Congrats to all the winners!

You guys rock! We’re delighted to be sending out a batch of freshly-printed Second-Edition WordPress Visual QuickStart Guides to all our contest winners.

Didn’t win this time? Be sure to Like us on Facebook or follow us on Twitter to be the first to hear about future giveaways and contests!