Grow your CSS skills. Land your dream job.

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.

Comments

  1. Permalink to comment#

    I wouldn’t steal images, but I do like to use the Firefox Web Developer plugin to see how various CSS tricks work. Checking out background images is one way to do that. The image menu on that plugin has a “view image information” option which essentially shows all of a sites image’s in a list with the path.

  2. Permalink to comment#

    I agree with Douglas in that you shouldn’t steal images, it’s not that hard to create your own. Plus there are places like squidfingers or Stripe Generator that either allow you to download what’s there or create your own.

    That being said, if you have the Web Developer tool bar installed you can simply right click on the background image you want to see and select ‘View Background Image’ to have it open in your current window. This works in most cases except when you get into multiple images in multiple divs around a single bit of content, perhaps to have rounded corners and flexible width and/or height.

  3. chris
    Permalink to comment#

    But why? heh… I mean really…

    I’ll usually only do this to steal… err… look at code (php, js, css, etc.) :)

  4. Permalink to comment#

    I don’t suggest to steal image too. But if you are interested in the background image, a quick way is use Firefox, right-click on the background area, select “View Background Image”.

  5. @chris: It’s just a little technique for some people might not know, that’s all. I agree it’s fun to look at people’s code to find links to their javascript so you can see what’s all in use there. But PHP? I wish. That’s all server side so there really is no way to peak at that stuff. Remember the big debacle when the PHP for Facebook’s homepage got out?

  6. Permalink to comment#

    Personaly i knew about this. being a css coder, you just know it ;) . Ive never done this, because I never wanted to steal others work.

  7. Permalink to comment#

    Yea but keep in mind they may have saved the sorce as a .phps file.

  8. Permalink to comment#

    What about “Extras -> Site Information -> Media”? ;)

    Stealing is bad!

  9. Permalink to comment#

    You can also use Safari’s “Activity” window. It will show you all the files used for the page including images, js, etc.

  10. Permalink to comment#

    I agree with Nick La – right-clicking in Firefox is SO much easier than the technique described here. But why would you want to steal the image? Any self-respecting designer would never use somebody else’s work so dishonestly

  11. I agree no self-respecting designer would straight up steal an image like this and pass it off as their own. However, a self-respecting designer always likes to look under the hood and see how other websites were built. That is the point of this. Getting your hands on a background image you like to use as a starting place for your own design.

  12. Permalink to comment#

    Doesn’t ../../ go back two directories, and just plain / go back to the root directory?

  13. @Hatkirby: Yep, you are right, thanks. I updated the article to be not-wrong.

  14. Permalink to comment#

    You’re welcome! Great site, by the way. I think it’s amazing how much you can do with CSS.

  15. I use Frontpage, so the chances of my “style” being duplicated is probably quite high. I really don’t mind. What has really made me mad is discovering that some one stole two entire pages from my site. They just copied and pasted all the text into two other sites.

    The hosting companies of these sites have been worse than useless. Once I threatened legal action the thief was persuaded to remove one page – for how long I wonder, and re-edit the other. I don’t care if it’s re-edited, it’s my ideas, my imagination, my effort, my time, my talent, my skill and MY work he stole! I want both pages removed from both sites. If anyone out there has a good idea for getting my copied work off these sites please do let me know!

  16. @Doreen: Threating legal action (and then potentially following through with legal action) is the only sure-fire way to handle it, unfortunately. At least you were able to contact them at all. If they are hot-linking your images, you may want to check out some techniques for preventing that.

  17. Permalink to comment#

    I can see a good use for this, for example if for a website like youtube you wanted a background image for your channel you can type a url in to the background image but you cannot upload one so that is a possible use, but i agree, if you can upload you own image anywhere do that instead and use your imagination and create your own!

  18. Peter
    Permalink to comment#

    best way I’ve found is “right click>view page info” in firefox. Under the media tab it lists all the Images used in the web page. The best part of it is a handy save as button, which allows you to save all the images in one go, a godsend when you’re trying to figure out how other websites tick…

  19. Frank
    Permalink to comment#

    How about in IE: Rightclick, save background!
    In Firefox: rightclick | ‘view background’ – and then SAVE

  20. Permalink to comment#

    Seems there’s a never ending supply of unqualified wannabees somehow convinced they have something to offer the world, despite all the evidence to the contrary.
    Better grab a cloth mate, wipe that egg off your face before it starts to stink the place out.
    Utterly pointless post with several replies explaining exactly why it’s wasn’t worth anyones time reading – the only value your readers might get from it is a jolly good laugh at your expense. The logical thing to have done would be delete it quick and try to do a better job with the next one.
    For those of you that get all bent out of shape by other people ‘stealing’ your precious work, I’ve got a very simple solution for you – don’t publish it on the web where anyone can copy it and do with it as they please. From what I’ve seen so far I’d say you’d be doing everyone a favor. Rather than wasting your time trying to track people down and threatening people with legal action (you didn’t honestly expect a hosting company to take you seriously did you?) don’t you think your time would be better spent creating more of that wonderful original content instead of moaning about something so utterly insignificant?
    To the people who think a little bit of javascript that disables right-click is going to protect their work – you do realize it takes about 1sec to turn off js!
    Encrypting your flash movies? – like everything else, it takes about 30 seconds to find decryption apps on rapidshare / megaupload / mediafire etc. You name it: software, music, movies, ebooks, once it’s out in the wild you no longer have control over it – if you can’t accept that it’s ALL freely available for anyone that knows how to use google – DON’T PUBLISH!
    .php kiddies that believe they can ‘encode’ their shoddy scripts and somehow prevent people taking a copying – all they’re doing is demonstrating just how little they understand the business they’re in. The minor inconvenience caused by their pointless attempts to ‘protect’ their work, simply make the ‘thieves’ all the more inclined to crack it open and hand it out to anyone that wants it.
    Crying about TWO of your precious pages that you found on someone else’s site is just absurd – you might have noticed that most people actually WANT their work passed around and copied all over the web – rss? youtube? wakey wakey… I’d be willing to bet you’re only really annoyed because you did get the credit you felt you deserved, right? You didn’t actually lose anything, you still got to keep your work and can still proudly publish it on your site for others to marvel at your talents, you just didn’t get your ego stroked they way you would’ve preferred. Boo hoo. Count yourself lucky your entire site (or network of sites?) didn’t get scraped and fed thru some tricky rewording scripts and republished en-mass, knowing that it most likely resulted in the ‘thief’ making more money on auto-pilot than you’re likely to make grafting away for the next few months.
    Unfortunately (for you) that’s just the way it is. Fact is – if my browser can render it – I’ve already got it! No point whining about it on some retards blog. Besides -if the link in your signature is anything to go by, you’ve got much bigger problems than someone ‘stealing’ a couple of your pages.

    Blind leading the blind round here – so long suckers.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".