How To Steal A Websites Background Image
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:
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:
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.
Loading ...
1
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.
Comment by Douglas T — December 4, 2007 @ 10:29 am
2
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.
Comment by chipgrafx — December 4, 2007 @ 10:46 am
3
But why? heh… I mean really…
I’ll usually only do this to steal… err… look at code (php, js, css, etc.)
Comment by chris — December 4, 2007 @ 2:27 pm
4
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”.
Comment by Nick La — December 4, 2007 @ 5:48 pm
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?
Comment by Chris Coyier — December 4, 2007 @ 7:06 pm
6
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.
Comment by TyCat — December 4, 2007 @ 8:07 pm
7
Yea but keep in mind they may have saved the sorce as a .phps file.
Comment by Rocky — December 4, 2007 @ 8:52 pm
8
What about “Extras -> Site Information -> Media”?
Stealing is bad!
Comment by Michel — December 5, 2007 @ 11:58 am
9
You can also use Safari’s “Activity” window. It will show you all the files used for the page including images, js, etc.
Comment by Bart — December 6, 2007 @ 10:40 am
10
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
Comment by Robin — December 7, 2007 @ 2:15 am
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.
Comment by Chris Coyier — December 7, 2007 @ 7:59 am
12
Doesn’t ../../ go back two directories, and just plain / go back to the root directory?
Comment by Hatkirby — December 8, 2007 @ 12:50 pm
13
@Hatkirby: Yep, you are right, thanks. I updated the article to be not-wrong.
Comment by Chris Coyier — December 8, 2007 @ 6:27 pm
14
You’re welcome! Great site, by the way. I think it’s amazing how much you can do with CSS.
Comment by Hatkirby — December 8, 2007 @ 6:32 pm
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!
Comment by Doreen Joyner — March 5, 2008 @ 2:39 am
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.
Comment by Chris Coyier — March 5, 2008 @ 8:43 am
17
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!
Comment by Dan — March 13, 2008 @ 4:44 am