How to Steal Website Background Image [Well Explained]

Some days ago I was doing research and I discovered a hack on How to Steal Website Background Image.

In this article I’ll show you how to get the background image of any website; with screenshots and detailed explanation.

Web developers sometimes when surfing the internet may come across amazing background image designs, which they may want to apply in their forth coming designs.

As a web developer, this hack of getting background images of any website has helped me a lot, so I decided to share with you today.

A good number of powerful layout you’re seeing on websites today are designed using background images.

Disclaimer: I’m not promoting stealing contents from websites without the owner’s consent. I discovered this trick when I was doing research and I decided to share it to people who may need it.

One of the ways to prevents users from downloading your images is to set the image as a background image. When users right-click on background images, they won’t see any option to download it.

Let’s dive into the game…

Steps on How to Steal Website Background Image

• Stride 1: View the source code of the website
• Step 2: Locate the stylesheet file that contains the CSS class
• Step 3: Get the background image URL

This article is not limited to only website “body” background images. My main focus is to teach you how you can track the image path of any background image in any web page.

JonakyBlog tends to simplify its contents in order that people with little knowledge can still grab the information we are sharing.

In order to understand How to Steal Website Background Image, you need to have knowledge on how to view the source code of every website. This will enable you to track file paths of different files in a website.

Let me use this web page > https://fusebox.fm/pricing/ to show you how to get the image path of any background image.

As shown in the image above, the website used background image to design the list of their product features.

Now I want to get the URL path of that green image that is displayed in the image above.

Step 1: View the source code of the website – Steal Website Background Image

To view the source code of any website, from your desktop computer or PC, Press CTRL + U or Right click on the website and click on View Page Source.

For better understanding on viewing website source code, read this article. →→→ How to View the Source Code of Any Website [ultimate guide]

Back to the game! To get the CSS class that contains the background image you’re looking for, COPY TEXTS CLOSE TO THE BACKGROUND IMAGE YOU’RE LOOKING FOR ITS PATH.

In this case, I’ll copy “Advanced player features” to my clipboard and search for it in the new page that is showing the source code of “https://fusebox.fm/pricing/”.

To search for this text that you copied, from your computer (in the page showing the source code) press CTRL + F then press CTRL + V and finally hit ENTER to search the keyword you entered.

From above image, the CSS class that contains “Advanced player features” is “feature”.

Step 2: Locate the stylesheet file that contains the CSS class

We know that CSS classes are stored in website stylesheets. So to locate the CSS file that contains “feature”, we have to open the CSS files of the website.

In this case the exact CSS file that contains the class “feature” is located in LINE 37. Image above explained it more for visual learners.

Open the link and search for class “feature” by pressing CTRL + F and search for the keyword “feature”.

Step 3: Get the background image URL

For you to get the URL of the background image, you need to have some knowledge of HTML so that you can know the meaning of “background-image” whenever you sees it.

In our example above (image) the image URL path is truncated. All we can see is “../images/list-check.svg”.

I’ll come back to this later. Let me explain to you using a file path that looks like “../style.css”.

The ../ means “back up one directory level”. This means that if you are looking at

http://websiteexample.com/themes/ — the stylesheet actually resides at http://websiteexample.com/style.css

NOT http://websiteexample.com/themes/style.css

In the same manner, ../../ means “back up two directory levels”.

If you see just a preceding /, that means “back up all the way to the root directory”. This means that href=”/style.css” really resides at http://websiteexample.com/style.css.

Also if you come across some background image links that looks like – “images/home-bg.png”, it means that the image is located at the root folder of the website.

For example http://websiteexample.com/images/home-bg.png

SINCE YOU HAVE GOTTEN THIS TRICK, LETS PROCEED TO GET THE URL PATH OF THE IMAGE ABOVE

The entire path that contains image URL is https://fusebox.fm/wp-content/themes/fusebox/assets/dist/css/main.css but the path of the image URL we are seeing is “../images/list-check.svg”.

Now following the principles above, we have to back up one directory level.

All we have to do is to remove “/css” and include “/images/list-check.svg”. See modified link below ⤵

https://fusebox.fm/wp-content/themes/fusebox/assets/dist/images/list-check.svg

For you to view the picture that was used as the background image, open above link in a browser.

Congratulations ☑ – the image will be displayed.

To save the image, just press CTRL + S to save the image in your computer.

How do I get the body background image of a website?

To do this, view the source code of the particular website that you wanted to copy its background image. In the stylesheet.css path, look for “body” when the stylesheet opens.

Then find out the CSS codes and background image URL that was attached to the “body tag”

Where can I get stripes background image?

To avoid copying people web contents, you can use Stripe Generator to generate amazing stripes for designing your unique background images.

Conclusion

With the help of this discovery, one can download any picture that is used as a background image and implement it in his/her research work.

Disclaimer: This article was published for research purposes and the Admins of JonakyBlog is not promoting stealing contents from other websites.

If you have any challenges following this guide, use the comment section to notify us, so that we can assist you in your research.