Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Save Complete Website - Background Images not showing

When I click Save As in Firefox, Chrome, or IE, then choose "Webpage, Complete" from the save as menu, it does not appear to be saving the background images defined in my CSS. Am I doing something wrong? Here is a sample problem:

test.html

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <link href="test.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>
    <div id="test"></div>   
</body>
</html>

test.css

#test {
    width: 400px;
    height: 400px;
    background: url(img/bg.jpg)
}
like image 594
captainclam Avatar asked Feb 09 '12 03:02

captainclam


People also ask

Why is my background image not showing on my website?

Make sure the image path is set correctly in the background-image url. Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.

How do I save a background image from a website?

To download a background image, right-click the background image you want to download and click Save background as.... A Save Picture dialog box will appear, allowing you to select the directory in which you want to save the image.

Why are my images not showing up in HTML?

Why Is My Image Not Showing up in HTML? One of the reasons why your HTML image not showing in browser is that its file is not located in the same folder that is indicated within your tag. Also, the image may not load because the file name specified in the <img> tag does not match that of your image file.


3 Answers

The only solution who worked for me is to save the page as MHT with the plugin unMHT (for firefox) : https://addons.mozilla.org/fr/firefox/addon/unmht/

Even webfonts are dowloaded !!

MHT can be opened in IE & Chrome (and firefox but only with this extention). I know this solution is not perfect but this is the better I found...

like image 66
fred727 Avatar answered Oct 21 '22 04:10

fred727


By default browsers won't download images set in css.
You can do this in Firefox:
Right click -> View page info -> select media tab -> highlight all the files -> save as...

like image 24
elclanrs Avatar answered Oct 21 '22 03:10

elclanrs


Recently I've been testing saving the complete HTML web page with background images across various browsers and only Opera 12 was able to save the complete website as seen online. Just open the desired website, click Ctrl+S and choose to save a complete website.

like image 42
niutech Avatar answered Oct 21 '22 04:10

niutech