Images in copied website refuse to load

Question

I copied a web page for some inspiration, but when I opened it on my local machine the images will not load. When I look in the Page Inspector in Firefox and hover over the image source, it shows me the image in a preview window. The images are stored on my local machine. I have also tried the page without any JavaScript, but the result stays the same.

Does someone have an idea why the images refuse to show up?

Original: https://www.bol.com/nl/account/login.html

How it looks on my local machine:

The links to the images are 100% correct.

<h2 id="main_logo" class="omniture_main_logo">    
    <img class="print_logo" width="111" height="30" alt="" src="bol.com_files/bolcom_logo.png"></img>
    <a href="http://www.bol.com/nl/index.html">    
        bol.com    
    </a>    
</h2>

Answer 1

You will see that all images have a class of print-logo . In CSS, .print-logo has a display: none; style, which means it won't display on screen, but presumably will display when being printed.

The images are actually being drawn from the following sprite grid: https://ss-bol.com/nl/static/images/main/menu_sprite_grid100x50.png

Make sure you have this in your local files, in the correct place. The CSS and sprites are actually on a different domain: https://ss-bol.com/nl/static/ , just so you know.

EDIT:

The background-urls all seem to be in the CSS file as linked to in the head of the index.html. I would recommend downloading the main.2658368274.css ( here ) file into a css/dist folder on your local site, and changing the CSS link to:

<link href="/css/dist/main.2658368274.css" rel="stylesheet" type="text/css" media="all">

You can then download the sprite map ( here ), into a `images/main' folder.

Hope that works for you.

Answer 2

I tried it myself just now, it appears that a lot (if not all) of the images on this site are stored as CSS background images, and firefox is not downloading them or changing the paths properly. for example, the usp_banner.gif is trying to load from url("../../images/main/usp_banner.gif") but that doesn't exist when you use Firefox "Save As" feature.