Solved

No Background in FireFox, Works Well in IE

Posted on 2010-11-14
8
394 Views
Last Modified: 2012-08-13
The attached code works in IE but not Firefox.

I even tried adding the following but it still won't work:

background-attachment:fixed;
height: 100%;
width: 100%;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>untitled
</title>
<style type="text/css">

/* image background style */

html, body { height: 100%; width: 100%; background-attachment:fixed; background-image: url('C://Documents and Settings/Administrator/My Documents/My Pictures/snow-mountain-wallpapers_22126_1440x900.jpg'); background-repeat: no-repeat; }

</style>

</head>
<body>
Hello
</body>
</html>

Open in new window

0
Comment
Question by:EMB01
  • 2
  • 2
  • 2
  • +2
8 Comments
 
LVL 14

Expert Comment

by:ali_kayahan
ID: 34132766
Can you please try this one, absolute path with spaces wont work in web also
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>untitled
</title>
<style type="text/css">

/* image background style */

html, body { height: 100%; width: 100%; background-attachment:fixed; background-image: url('Pictures/snow-mountain-wallpapers_22126_1440x900.jpg'); background-repeat: no-repeat; }

</style>

</head>
<body>
Hello
</body>
</html>

Open in new window

0
 
LVL 14

Author Comment

by:EMB01
ID: 34132836
Sorry, that doesn't work.
0
 
LVL 14

Expert Comment

by:ali_kayahan
ID: 34132845
where is your background picture (snow-mountain-wallpapers_22126_1440x900.jpg) ? Is there a link to this page ?
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 22

Accepted Solution

by:
remorina earned 200 total points
ID: 34133212
Hi EMB01,

The background wou'dnt work correctly because you're refering to it as a file path, Explorer would work because it's a part of windows and understands the path, while other browsers might not work because the path isn't in a web acceptable form.

As a rule, you should avoid referring to images in my documents or any system folders, also saving the html file in a folder and saving the image in the same folder and refering to the image directly will work with no problems however, if you browse to the image and drag it to the browser, copying the url from the browser's address bar is what you would need in order for it to work correctly in this method.

I assume it should be something like this
html, body { height: 100%; width: 100%; background-attachment:fixed; background-image: url('file:///C:/Documents%20and%20Settings/administrator/My%20Documents/My%20Pictures/snow-mountain-wallpapers_22126_1440x900.jpg'); background-repeat: no-repeat; }

Open in new window


But once again you should avoid using such paths in CSS, and it also wouldn't work at all if you upload the html file online or take it to another PC.

Hope this helps
0
 
LVL 4

Assisted Solution

by:lordrt
lordrt earned 25 total points
ID: 34134146
Why not put the background image where your css file is found (same folder), thus no need to use paths then, just call it as
 background-image: url ('imagename.jpg');
0
 
LVL 4

Expert Comment

by:lordrt
ID: 34134156
else if you want to use path, it should be the site's path instead of the drive path, like for example
background-image: url ('http://www.mysite.com/files/image.jpg'), but yet again the image must be found in the folder containing the css + other files on the server
0
 
LVL 2

Assisted Solution

by:wasim117
wasim117 earned 25 total points
ID: 34135165
you can put the image in the same folder as CSS then add image-background
html, body { height: 100%; width: 100%; background-attachment:fixed; background-image: url('snow-mountain-wallpapers_22126_1440x900.jpg'); background-repeat: no-repeat; }

Open in new window


that path is creating issues with Firefox.
0
 
LVL 14

Author Closing Comment

by:EMB01
ID: 34140601
Thanks, I could put it on the desktop alternatively but I was just wondering why it wouldn't work as is.  I've never used the file:// protocol before...  interesting.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Decoding Special HTML Characters using Javascript? 2 29
Scroll 5 news at a time. 4 28
Can't get container centered 4 16
tiny glitch in my main slider 3 24
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question