How To Get A Website Background To Load Istantly

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

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

It's just a thing of tracking downward the image path.

Chances are background paradigm is going to exist assail the torso selector in a CSS file. And so the first step is going to exist finding the file path to the CSS file. Let's utilise this very site for an example. First, view the source code and await for the reference to the stylesheet in the <head> section:

In this case, I make it really easy considering the file path is not dynamic. The whole affair is correct 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 ../ ways "back up one directory level". That means if yous are looking at http://somesupercoolsite.com/weblog/ — the stylesheet really resides at http://somesupercoolsite.com/manner.css Not http://somesupercoolsite.com/blog/style.css As well, ../../ means "back upward two directory levels".

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

Also remember that sites may use multiple stylesheets, you lot might have to do a little guess and check here to detect the right one, merely you tin apply a little deductive reasoning and assume that "principal.css" is probably more likely than "print.css"

One y'all take the URL path to the CSS file, navigate your fashion to that in your browser:

Well lookie what we found! The trunk selector right at the height in this CSS file shows us the relative path to the paradigm file. All the same rules about relative paths apply here, so think to think about those when constructing your final URL path to the groundwork image. In this case, there wasn't any ../ stuff going on, but it didn't get-go with http:// either. That means the path "continues from the electric current location". This is important to think: 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.

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

And and so information technology is!

At present that you take the full file path to the image, simply navigate to that and yous volition be able to salvage it out as an image. Like I mentioned at the showtime of the article, don't just steal someone's background paradigm and use information technology, specially if information technology's really cool and unique. (Not the stripes =) — you lot can steal my stripes, I don't care) But at that place are many backgrounds that are simply but a good starting place for building your own.