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.

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!

Win The Book!

WordPress Visual QuickStart Guide Second Edition

WordPress Visual QuickStart Guide Second Edition

You love WordPress. You love free stuff.

This contest is for you.

Win a copy of our NEW book, the WordPress Visual QuickStart Guide, Second Edition. It’s the newest and best edition yet, chock full of step-by-step instructions and clear, useful screenshots to guide you through the process of doing pretty much everything you could possibly want to do with WordPress.*

Here’s how you enter:

There are THREE WAYS you can enter to win a copy of the new book.

  1. Use the Tweet Button at the bottom of this list to tell Twitter that you want to win our book
  2. Become our fan on Facebook and leave a comment on our wall telling us you want to win
  3. Post a link to this contest on your blog, website or Facebook page and encourage your readers to enter

As an added bonus: if you do ALL THREE of the things listed above and post a comment on this post telling us about it, we will enter your name THREE TIMES.

UPDATE: The contest runs from NOW until October 27. We will choose 10 winners. GOOD LUCK!

*This statement is almost certainly mostly somewhat untrue. But we do walk you through a LOT.

Adding page nav

So you’ve got this lovely new site and you’ve decided exactly how many posts to show at any given time to optimize the viewing experience. But – what’s this? You get to the end of your displayed posts and see…

…nothing.

A list of posts with no navigation at the bottom

Hey, where's my navigation?

You need a set of navigation links, and stat.

Luckily, they’re easy to add.

Open your index.php file. Scroll down until you get to the end of the Loop and add the following:

<div id="nav-below" class="navigation">
<div class="nav-previous">
<?php next_posts_link(
__('<span class="meta-nav">&larr;</span>
Older posts')) ?>
</div>
<div class="nav-next">
<?php previous_posts_link(
__('Newer posts
<span class="meta-nav">&rarr;</span>')) ?>
</div>
</div>

Save and close your index.php file.

Next, open your style.css file and add something like this:

div#nav-above,div#nav-below{
width:100%;
height:20px;
}
div#nav-above a, div#nav-below a{
color:#000;
text-decoration:none;
font-size:14px;
font-weight:bold;
display:block;
margin:20px 0;
}
div#nav-above a:hover, div#nav-below a:hover{
color:#000;
text-decoration:underline;
}
div.nav-previous{
float: left;
}
div.nav-next{
float: right;
}

Save and close your style.css file.

Now refresh your blog page, and behold! Fancy older/newer links to ensure that your readers can browse your content with ease.

A blog page with navigation links at the bottom

What lovely navigation you have!

WordPress 3.2: What’s New

WordPress 3.2 (“Gershwin”) has officially been released! This update includes some pretty big changes, so even if you’re not in the habit of backing up your WordPress installation before upgrading, you really should do it this time. Really. We mean it.

Done backing up yet? Good! Let’s get started.

The new Fullscreen Mode in the post editor provides a distraction-free writing space

Here’s some stuff you need to know about the newest version of WordPress:

  • Minimum requirements have changed. You’ll need PHP 5.2.4 or greater and MySQL 5.0.15 or greater.
  • IE 6 is no longer supported and IE 7 is being phased out.
  • There’s a new default theme (Twenty Eleven).
  • The Dashboard UI has been refreshed with a brand new look – it’s cleaner, easier on the eyes and sporting some slick typography updates.
  • The ‘Press This’ bookmarklet has a new UI as well.
  • When creating a post, you can now enter fullscreen mode, a gorgeously distraction-free space that lets you concentrate on writing.

There are a bunch of updates to the core files as well, making WordPress much lighter and faster-loading.

For a full breakdown of the new features, check out the Codex.

WordPress 3.1 is out!

WordPress logoThe newest WordPress core update brings a ton of exciting new functionality. We’ll be posting tutorials on how to integrate these new features into your site, but for now here’s a quick breakdown:

Internal linking made easy: In the olden days (WordPress 3.0 and older), linking to posts and pages on your own site was a chore. You had to find the post, copy the link, paste it into your edit screen…

Not so anymore! The Link dialog in the Edit screen has been re-vamped; now, when you click the little chain-link icon in your editor, you’ll see a searchable list of all your posts and pages. Choose the one you want and it automatically populates the link information (as well as giving you the option of opening the link in a new page). Note: this only works in the visual editor. Sadface for people like me, who live in HTML view.

The Admin Bar: Taking its cue from WordPress.com, this update gives logged in users an admin bar at the top of their site, giving quick information on and access to comments, updates, stats and shortlinks. It also lets you quickly edit your page or add a new post without opening a new tab. Haters can disable the Admin Bar in your Profile options.

Introducing Post Formats: WordPress exhibits some Tumblr envy with the debut of Post Formats, which allow theme developers to bake in special styling for different types of posts.

Enhanced CMS capabilities: Ever wanted a special archive for a custom post type? Now you can have one. There’s also support for advanced taxonomy and custom fields queries.

Our little WordPress is growing up so fast! *wipes tear* Check back soon for new tutorials and more info.

Custom backgrounds in WordPress 3.0

The Custom Background options screenThis one’s a quickie:

Want to add a custom background that you can switch out whenever you want?

  1. Open your functions.php file.
  2. Add the following line of code: add_custom_background();

That’s it. Seriously.