How To: Resizeable Background Image

Published by Chris Coyier If you are looking for how to do FULL SCREEN BACKGROUND IMAGE, go here. My friend Richard recently came to me with a simple CSS question: Is there a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Wow, that's a tall order. Finished Project: What's The Weather? Go ahead and resize your browser window around and notice how the image will resize to fit. First Attempt Well my first thought was that this really needs to be a CSS background-image. You guessed it, jQuery. Second Attempt (better) While the first attempt did a decent job, it failed at the most fundamental level: it wasn't "resizeable". We can, again, use jQuery and the dimensions plugin to get our browser window's width. In order to get this inline image to behave more like a background image, we can use that unique class we applied to apply some absolute positioning. Third Attempt (best)

Think Design Blog - Wordpress - Lorem Ipsum Test Post Pack Since I make all of my websites with WordPress, I often find myself having to make dummy posts to test out themes layouts and styles. This is especially necessary when your working with a magazine theme, that needs a lot of content to function properly. So when I was finishing up some styling stuff on my latest theme release (Versatility Lite) I thought it would be cool if there was some sort of post pack I could upload and save myself some time. So I figured I would make one :) So the next time your designing, creating, or customizing a theme, you can upload this dummy post pack and save yourself a bunch of time! Installation: 1. Updated Info For New WordPress InstallsInstallation (For 2.7+): 1. Customization: Everything should be universal expect for the thumbnails created with "Custom Fields." Did you like this post?

Print Friendly & PDF timotheeg/jsegg Unheap - A tidy repository of jQuery plugins Inpage SEO Checker - Continuously Check Your SEO with Javascript