How To Steal A Websites Background Image

Published by Chris Coyier

Note: this should only be used for the powers of good! Don't go around stealing people's background images and using them on your own site without asking!

Many sites employ the use of a background image. They range from absolutely, unbelievably awful to simple and classy to downright inspiring. Since the image files that create them need to be kept in a public directory in order for them to work, they are accessible by anyone.

It's just a matter of tracking down the image path.

Chances are background image is going to be set on the body selector in a CSS file. So the first step is going to be finding the file path to the CSS file. Let's use this very site for an example. First, view the source code and look for the reference to the stylesheet in the <head> section:

viewsource.png

In this case, I make it really easy because the file path is not dynamic. The whole thing is right there. This might not always be the case, often file paths to CSS files are relative paths so they might look something like this: href="../style.css"

The ../ means "back up one directory level". That means if you are looking at http://somesupercoolsite.com/blog/ -- the stylesheet actually resides at http://somesupercoolsite.com/style.css NOT http://somesupercoolsite.com/blog/style.css Likewise, ../../ means "back up two directory levels".

If you see just a preceding /, that means "back up all the way to the root directory". That means if you are looking at http://somesupercoolsite.com/way/awesome/dude/blog and the stylesheet link in the header stays href="/style.css", the stylesheet actually resides at http://somesupercoolsite.com/style.css. Got it? Good.

Also remember that sites may use multiple stylesheets, you might have to do a little guess and check here to find the right one, but you can use a little deductive reasoning and assume that "main.css" is probably more likely than "print.css"

One you have the URL path to the CSS file, navigate your way to that in your browser:

cssfind.png

Well lookie what we found! The body selector right at the top in this CSS file shows us the relative path to the image file. All the same rules about relative paths apply here, so remember to think about those when constructing your final URL path to the background image. In this case, there wasn't any ../ stuff going on, but it didn't start with http:// either. That means the path "continues from the current location". This is important to remember: the file path referenced in the CSS will be relative to the location of the CSS file, NOT the URL you happened to be looking at.

You might be thinking that the background image reference in this example would be located at http://css-tricks.com/images/stripe.png BUT you'd be wrong. The file path is relative to the location of the CSS file, so it's actually at http://css-tricks.com/wp-content/themes/CSS-Tricks/images/stripe.png

And so it is!

Now that you have the full file path to the image, just navigate to that and you will be able to save it out as an image. Like I mentioned at the beginning of the article, don't just steal someone's background image and use it, especially if it's really cool and unique. (Not the stripes =) -- you can steal my stripes, I don't care) But there are many backgrounds that are simply just a good starting place for building your own.