How To Find Website Background Image

Notation: this should merely exist used for the powers of expert! Don't go effectually stealing people's groundwork images and using them on your own site without request!

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 gild for them to work, they are accessible by anyone.

It'due south but a matter of tracking down the image path.

Chances are background image is going to be gear up on the body selector in a CSS file. So the starting time footstep is going to be finding the file path to the CSS file. Let's apply this very site for an case. First, view the source lawmaking and look for the reference to the stylesheet in the <caput> department:

In this case, I go far actually piece of cake because the file path is not dynamic. The whole affair is right at that place. This might not always exist the example, often file paths to CSS files are relative paths and so they might look something like this: href="../style.css"

The ../ ways "back up i directory level". That means if you are looking at http://somesupercoolsite.com/web log/ — the stylesheet actually resides at http://somesupercoolsite.com/style.css Non http://somesupercoolsite.com/blog/style.css Likewise, ../../ means "support two directory levels".

If yous see just a preceding /, that means "back up all the mode to the root directory". That ways if yous are looking at http://somesupercoolsite.com/way/crawly/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.

Besides remember that sites may use multiple stylesheets, yous might have to do a little guess and check here to notice the right ane, simply you tin can employ a footling deductive reasoning and assume that "primary.css" is probably more than 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 plant! The body selector right at the top in this CSS file shows us the relative path to the image file. All the aforementioned rules about relative paths apply here, so call back 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 starting time with http:// either. That means the path "continues from the current location". This is important to recollect: the file path referenced in the CSS will be relative to the location of the CSS file, Non the URL you lot happened to be looking at.

You might be thinking that the background image reference in this example would exist located at https://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'southward actually at https://css-tricks.com/wp-content/themes/CSS-Tricks/images/stripe.png

And so it is!

At present that yous have the full file path to the image, just navigate to that and you will be able to salvage it out equally 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 absurd and unique. (Non the stripes =) — you can steal my stripes, I don't care) Simply in that location are many backgrounds that are but just a practiced starting place for building your own.