Hey,
When I preview my web page in Firefox all is good. However, in IE the background image is missing. I did a browser compatibility check and dreamweaver said there is an issue with line 33 an "error parsing style."
Here are lines 31-36:
31) body {
32) background-image: url(Images/Gamer%27s%20Edge%20Logo%20(Website%20Background)
33) .jpg);
34) background-repeat: repeat;
35) background-image: url(Images/Gamer%27s%20Edge%20Logo%20Website%20Background.jpg);
36) }
Its probably just some stupid mistake on my part but, I cant figure it out.
Thanks in advance!
Full Version: Background Image Missing (Error parsing styles)
The two background-image settings use different URLs. Where is the image really located? (BTW, it might help if you renamed the image, using only characters that don't need to be escaped in URLs.)
Can you provide the URL (address) of a document that demonstrates the problem?
Can you provide the URL (address) of a document that demonstrates the problem?
Thanks for responding so quickly.
I fixed the location error. So now the lines read:
}
body {
background-image: url(Images/Gamers%20Edge%20Logo%20Website%20Background.jpg);
background-repeat: repeat;
}
When I perform a browser compatibility check all is good now. However when I preview the web page in IE the background image is still missing (in Firefox it still works).
What do you mean by the URL (address) of a document that demonstrates the problem? The web page is not on the internet yet. I'm still working on it in dreamweaver.
I fixed the location error. So now the lines read:
}
body {
background-image: url(Images/Gamers%20Edge%20Logo%20Website%20Background.jpg);
background-repeat: repeat;
}
When I perform a browser compatibility check all is good now. However when I preview the web page in IE the background image is still missing (in Firefox it still works).
What do you mean by the URL (address) of a document that demonstrates the problem? The web page is not on the internet yet. I'm still working on it in dreamweaver.
QUOTE
What do you mean by the URL (address) of a document that demonstrates the problem? The web page is not on the internet yet. I'm still working on it in dreamweaver.
It's hard for us to help if we can't see the problem.
QUOTE(Darin McGrew @ Jan 9 2009, 08:08 PM) 
QUOTE
What do you mean by the URL (address) of a document that demonstrates the problem? The web page is not on the internet yet. I'm still working on it in dreamweaver.
It's hard for us to help if we can't see the problem.Ah, I see what you mean. Okay, I guess I will try to finish the site and if the problem still occurs when its all done and online then I will post here again with the URL.
Thanks!
Hi again.
Well I have been trying to figure this problem out but to no avail. Here is what I have tried so far.
1) I renamed the image to something very simple like logo. Thinking that maybe some of the odd characters in its name were causing the problem but that did not work.
2) I followed some of the advice of other website and tried putting in some other codding to fix the problem but that has not worked. Here is the link to what I'm referring too:
http://www.webcredible.co.uk/user-friendly...-explorer.shtml
Go to "3. Disappearing background images" when you get to the site.
3) I created a new HTML document and only put the code for my background image in. But that did not work. Here is the HTML for you:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-image: url(logo.jpg);
background-repeat: repeat;
}
-->
</style></head>
<body>
</body>
</html>
p.s. this problem of the background image diapering only occurs in IE and it seems to work just fine in FF.
Any ideas as to what could be wrong?
Well I have been trying to figure this problem out but to no avail. Here is what I have tried so far.
1) I renamed the image to something very simple like logo. Thinking that maybe some of the odd characters in its name were causing the problem but that did not work.
2) I followed some of the advice of other website and tried putting in some other codding to fix the problem but that has not worked. Here is the link to what I'm referring too:
http://www.webcredible.co.uk/user-friendly...-explorer.shtml
Go to "3. Disappearing background images" when you get to the site.
3) I created a new HTML document and only put the code for my background image in. But that did not work. Here is the HTML for you:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-image: url(logo.jpg);
background-repeat: repeat;
}
-->
</style></head>
<body>
</body>
</html>
p.s. this problem of the background image diapering only occurs in IE and it seems to work just fine in FF.
Any ideas as to what could be wrong?
QUOTE(Darin McGrew @ Jan 9 2009, 08:08 PM)
QUOTE
What do you mean by the URL (address) of a document that demonstrates the problem? The web page is not on the internet yet. I'm still working on it in dreamweaver.
It's hard for us to help if we can't see the problem.Hey,
Sorry it took so long. Here is the URL. Its just going to be the background image nothing else. Try it in FF and IE. It should work in FF but not IE.
www.gamersedge.tk
If anyone has any ideas please post!
Might have if you post the URL. 
BTW, I don't see how http://www.webcredible.co.uk/user-friendly...-explorer.shtml is applicable to you code.
<EDIT>
OK, got it now.
BTW, I don't see how http://www.webcredible.co.uk/user-friendly...-explorer.shtml is applicable to you code.
<EDIT>
OK, got it now.
QUOTE(pandy @ Jan 11 2009, 08:29 PM)
Might have if you post the URL.
BTW, I don't see how http://www.webcredible.co.uk/user-friendly...-explorer.shtml is applicable to you code.
<EDIT>
OK, got it now.
Yeah sorry about that i fixed it now.
That website might not be applicable to my code. I'm new to this and was getting frustrated so I was just trying things out.
p.s. thanks for you guys help by the way.
Well, had you shown us the page to start with it would have been a lot quicker.
I don't see a background image in any browser, neither at www.gamersedge.tk nor at
http://gamersedgewebsite.webs.com.
If you go directly to http://gamersedgewebsite.webs.com/logo.jpg you'll see that the image isn't displayed, neither do you get a 404 (file not found). IE displays a broken image icon. K-Mel tells me: "The image http://gamersedgewebsite.webs.com/logo.jpg cannot be displayed, because it contains errors."
Now, images can be corrupted if you upload them in text mode instead of binary mode. But I don't think that's what has happened because they usually display but are distorted beyond recognition. Maybe the image was bad to start with. When you started this thread you looked at the page locally on your own machine, didn't you?
I don't see a background image in any browser, neither at www.gamersedge.tk nor at
http://gamersedgewebsite.webs.com.
If you go directly to http://gamersedgewebsite.webs.com/logo.jpg you'll see that the image isn't displayed, neither do you get a 404 (file not found). IE displays a broken image icon. K-Mel tells me: "The image http://gamersedgewebsite.webs.com/logo.jpg cannot be displayed, because it contains errors."
Now, images can be corrupted if you upload them in text mode instead of binary mode. But I don't think that's what has happened because they usually display but are distorted beyond recognition. Maybe the image was bad to start with. When you started this thread you looked at the page locally on your own machine, didn't you?
QUOTE(pandy @ Jan 11 2009, 08:49 PM)
Well, had you shown us the page to start with it would have been a lot quicker.
I don't see a background image in any browser, neither at www.gamersedge.tk nor at
http://gamersedgewebsite.webs.com.
If you go directly to http://gamersedgewebsite.webs.com/logo.jpg you'll see that the image isn't displayed, neither do you get a 404 (file not found). IE displays a broken image icon. K-Mel tells me: "The image %E2%80%9Chttp://gamersedgewebsite.webs.com/logo.jpg%E2%80%9D cannot be displayed, because it contains errors."
Now, images can be corrupted if you upload them in text mode instead of binary mode. But I don't think that's what has happened because they usually display but are distorted beyond recognition. Maybe the image was bad to start with. When you started this thread you looked at the page locally on your own machine, didn't you?
Yes it was all local. However, when I go the www.gamersedge.tk right now it works in FF but not IE. But you are saying you cannot see it in any browser?
Not in any browser and not in any image program. I downloaded the file.
Did you have the page there earlier? You are probably viewing a cached copy in FF. Refresh your browser.
Did you have the page there earlier? You are probably viewing a cached copy in FF. Refresh your browser.
QUOTE(pandy @ Jan 11 2009, 09:02 PM)
Not in any browser and not in any image program. I downloaded th file.
Did you have the page there earlier? You are probably viewing a cached copy in FF. Refresh yur browser.
I just went on another computer and checked the website and I can view the background image in FF but not IE.
The background image is black with a grayish "G" intertwined with an "e" the image repeats many times.
in IE its just a blank white page with the work test at the top
Maybe we have different versions then. But fact remains, the image is corrupt. It comes up all black in every image program I tried. Opera is the only browser that opens it and it's all black there to.
Open it in the program you made it with, CS3 it seems, and save a copy of it. See if the copy works.
Open it in the program you made it with, CS3 it seems, and save a copy of it. See if the copy works.
Oh, and check if it displays properly in CS3.
QUOTE(pandy @ Jan 11 2009, 09:29 PM)
Oh, and check if it displays properly in CS3.
Alright, well it seems you are on to something. I'm just not sure how to fix it. I tried another (unrelated) image and it work perfectly. However, when i tried to use the duplicate of my background image (like you had suggested) it did not work. So clearly their is a problem with my image.
I created the image using illustrator and then touched it up and added some effects in photoshop then saved it as a jpeg. Maybe it got corrupted when photoshop saved it as a jpeg?
How do I fix this problem?
QUOTE(pandy @ Jan 11 2009, 09:24 PM)
Maybe we have different versions then. But fact remains, the image is corrupt. It comes up all black in every image program I tried. Opera is the only browser that opens it and it's all black there to.
Open it in the program you made it with, CS3 it seems, and save a copy of it. See if the copy works.
Wait wait. You said its black. the image is supposed to be black with a G and an E that are grayish but faint (its kinda hard to see). It could be that the image is coming up.
p.s. But then again i do not see the image in dreamweaver when i apply it as the background image (just noticed that).
p.p.s. I just tried another image (one that went through the same process of being edited in photoshop and then saved as a jpeg.) and it worked. So its definitely something with that particular background image i was using.
Do you have any ideas on how I could fix this problem?
FWIW, I see the background image just fine (Firefox, Opera, or Safari on a Mac).
QUOTE
Wait wait. You said its black. the image is supposed to be black with a G and an E that are grayish but faint (its kinda hard to see).
It's all black. So can you see it correctly in another editor than CS?
QUOTE
Do you have any ideas on how I could fix this problem?
Have you tried what I already suggested and how did it go?
Attach the original image to a post here.
QUOTE(Darin McGrew @ Jan 12 2009, 04:30 AM)
FWIW, I see the background image just fine (Firefox, Opera, or Safari on a Mac).
That's one crazy image!
QUOTE(pandy @ Jan 11 2009, 10:31 PM)
QUOTE
Wait wait. You said its black. the image is supposed to be black with a G and an E that are grayish but faint (its kinda hard to see).
It's all black. So can you see it correctly in another editor than CS?
QUOTE
Do you have any ideas on how I could fix this problem?
Have you tried what I already suggested and how did it go?
Attach the original image to a post here.
I opened the original photoshop image and saved it as a copy of the background image, but that did not work. I do not have another editor other than CS but i can view it in windows photo gallery.
p.s. it will not let me attach the original photoshop file because it says its not a recognized format and it says the jpeg image is to big. Do you have a email i could send it too or something.
The image is only 92 x 95 px at less than 600Kb, which is quite heavy for such a rather small image size.
I had to zoom in on the image in Preview (Mac) to see the gray characters you talked about. Otherwise, the image seems black.
Be sure to always use Save for Web & Devices in the File menu of Photoshop. Saving the image that way will decrease the file size considerably, namely to 4K (2.395 octets). See the attached logo2.jpg file.
To attach the .psd in the forum, put it in a .zip archive first and upload that.
Click to view attachment
I had to zoom in on the image in Preview (Mac) to see the gray characters you talked about. Otherwise, the image seems black.
Be sure to always use Save for Web & Devices in the File menu of Photoshop. Saving the image that way will decrease the file size considerably, namely to 4K (2.395 octets). See the attached logo2.jpg file.
To attach the .psd in the forum, put it in a .zip archive first and upload that.
Click to view attachment
QUOTE(Frederiek @ Jan 12 2009, 03:41 AM)
The image is only 92 x 95 px at less than 600Kb, which is quite heavy for such a rather small image size.
I had to zoom in on the image in Preview (Mac) to see the gray characters you talked about. Otherwise, the image seems black.
Be sure to always use Save for Web & Devices in the File menu of Photoshop. Saving the image that way will decrease the file size considerably, namely to 4K (2.395 octets). See the attached logo2.jpg file.
To attach the .psd in the forum, put it in a .zip archive first and upload that.
Click to view attachment
You know a lot of people say Jesus is our savior. But to be honest I think you guys are my savior.
It WORKED Frederiek!!! Such a simple answer to a problem that has been frustrating me for days now. All I had to do was take the original photoshop file and use "Save for Web & Devices" and it worked! Thanks Frederiek, Pandy and Darin for your guys help!!!!!!
p.s. In fact the solution was so simple that now I fell like a complete idiot. haha
p.p.s oh just one last question Frederiek. Do you know why this was the only image that would not display? All my other images that I had for my website I saved using the normal "Save As" just like I did with my background image. But they seemed to display just fine. And also, do you suggest that I go back and save all those other images using "Save for Web & Devices"?
I don't know, I'm on Safari/Mac. I saw the image before and now (just like Darin on his Mac), but it looks rather blac, like I said before. Oh well, apparently that's intentionally.
Actually, I can't say if you need to resave the other images with "Save for Web & Devices" as there are no other images at the url you provided. Anyway, that's the best way to optimise images for the web in Photoshop. Surely they say something of the kind in the manual/help.
And you're welcome. You saved yourself eventually.
Actually, I can't say if you need to resave the other images with "Save for Web & Devices" as there are no other images at the url you provided. Anyway, that's the best way to optimise images for the web in Photoshop. Surely they say something of the kind in the manual/help.
And you're welcome. You saved yourself eventually.
Do you know what's wrong with the image? I get that Save for the Web reduces the file size, but the size can't be the reason it doesn't work. 
The huge difference in file size isn't explicable by the image not being optimized, I think. There must be something else.
I'm curious, do you see any letters in the attached image? OK, I see bad, but I've enlarged it more than 10 times and all I see is black. It's the image I downloaded, I just re-saved it to get the size down.
Click to view attachment
The huge difference in file size isn't explicable by the image not being optimized, I think. There must be something else.
I'm curious, do you see any letters in the attached image? OK, I see bad, but I've enlarged it more than 10 times and all I see is black. It's the image I downloaded, I just re-saved it to get the size down.
Click to view attachment
Interesting. Firefox/Linux can't display the image ("because it contains errors"), and Opera/Linux displays it all black. Something seems to be wrong with it.
Never mind. I see it now. I upped the contast about 10 times, THEN I saw it. Hmmm. A Mac thing? Gamma? 
Came to think of something. Do you use color management? Could the color space be embedded in the large image and that's what causes the problem?
Gamma? Came to think of something. Do you use color management? Could the color space be embedded in the large image and that's what causes the problem?
I'm obsessing on this now.
This is how much I had to increase the contrast to see faint letters.
Click to view attachment
This is how much I had to increase the contrast to see faint letters.
Click to view attachment
My eyes aren't getting any better either, that's why I kept saying it looked black to me. In Preview I can resize the view of the image and it's only then that I vaguely saw the gray characters. I downloaded the original .jpg too and opened it in Photoshop without errors what so ever, resaved it for web and voilą.
I d/l your post attachment too, Pandy. In your image, I even have more difficulty to see the characters. Mine looks better, though I have to zoom in too
Anyway, such a small file shouldn't weigh as much and as you saw yourself, save for web decreased the volume considerably.
Question remains why some OS's return an error on the image.
I d/l your post attachment too, Pandy. In your image, I even have more difficulty to see the characters. Mine looks better, though I have to zoom in too
Anyway, such a small file shouldn't weigh as much and as you saw yourself, save for web decreased the volume considerably.
Question remains why some OS's return an error on the image.
But I don't see them even if I maginify.
Yeah. Probably the same thing that cause that abnormal file size.
QUOTE
Question remains why some OS's return an error on the image.
Yeah. Probably the same thing that cause that abnormal file size.
QUOTE(pandy @ Jan 12 2009, 04:28 PM)
But I don't see them even if I maginify.
QUOTE
Question remains why some OS's return an error on the image.
Yeah. Probably the same thing that cause that abnormal file size.
I don't know if it would help at all, but I could upload the new working background image to the website so you guys could see that and compare the difference. Would that help?
You could try. Though all images we all tried, seemed entirely black.
QUOTE(Frederiek @ Jan 13 2009, 03:02 AM)
You could try. Though all images we all tried, seemed entirely black.
You can try going to the website here: www.gamingedge.net
However, that link will probably not work because I just got the web host today and the servers DNS have not propagated yet. So if it does not work then go here: http://174.132.156.220/~gaming/
P.S. I can see the image clearly now in IE and FF but all the computers I have used run windows so that could be a factor.
Yep, the DNS has not propagated yet, so I went to the second url.
Do you mean you actually see the characters in the background of that page?
It's so subtle that I don't see it. And yet, the page should be full of it, since the image is small and tiles.
I'm on Mac, but Pandy is on PC. So I don't think the OS has anything to do with it.
Anyway, if you are satisfied with what you see, then I think there is no problem. It's such a minor issue. What's far more important is the content you put in the site.
Do you mean you actually see the characters in the background of that page?
It's so subtle that I don't see it. And yet, the page should be full of it, since the image is small and tiles.
I'm on Mac, but Pandy is on PC. So I don't think the OS has anything to do with it.
Anyway, if you are satisfied with what you see, then I think there is no problem. It's such a minor issue. What's far more important is the content you put in the site.
QUOTE(Frederiek @ Jan 14 2009, 03:21 AM)
Yep, the DNS has not propagated yet, so I went to the second url.
Do you mean you actually see the characters in the background of that page?
It's so subtle that I don't see it. And yet, the page should be full of it, since the image is small and tiles.
I'm on Mac, but Pandy is on PC. So I don't think the OS has anything to do with it.
Anyway, if you are satisfied with what you see, then I think there is no problem. It's such a minor issue. What's far more important is the content you put in the site.
Yeah I can see them. I even asked my 63 year old father to take a look and he could see them. Which proves there most be some variable effecting the image on different machines (right?). I don't know I'm the last person that should be making calls on this. haha
Wait, are you saying the content of my site suck! jk jk. I like to kid around.
Hey, thanks again guys for all your help! I really appreciate it!
The background loads but it's all black. 
QUOTE(pandy @ Jan 14 2009, 11:14 AM)
The background loads but it's all black.
I just got done with the site and the background seems to be displaying fine (www.thegamingedge.net). I really don't know why it was doing that. At first I thought it was the image size but I really don't know because all my other images display just fine and they are pretty big.
By the way. Now that you can see my other images do you think I should go back into photoshop and save the for the web or is it fine to just leave them be.
Again thanks for all your help guys!
QUOTE(hotrod @ Jan 21 2009, 03:03 AM)
QUOTE(pandy @ Jan 14 2009, 11:14 AM)
The background loads but it's all black.
I just got done with the site and the background seems to be displaying fine (www.thegamingedge.net). I really don't know why it was doing that. At first I thought it was the image size but I really don't know because all my other images display just fine and they are pretty big. Could it be the contrast on the monitors we are using? Maybe mine monitor has a higher contrast ratio so i can see the image or something.
By the way. Now that you can see my other images do you think I should go back into photoshop and save the for the web or is it fine to just leave them be.
Again thanks for all your help guys!
Sorry I wanted to edit my last post but I ended up replying. haha my bad!
QUOTE(pandy @ Jan 14 2009, 11:14 AM)
The background loads but it's all black.
I finally figured it out!!!!!!!
It has to do with the monitor your viewing the image with. I discovered this by enlisting the help of some tech guys at my web hosting company. They said they were able to see the image just fine with their middle monitors but on the outside monitors the background was black. So, depending on the monitor you are using to view the image with you either can or cant see the image. This probably has something to do with the faint colors of the image and how they sort of blend together.
Unfortunately, now I have another problem. How do I fix it. The simple answer is to just increase the contrast ratio/brightness. However,
because my monitor displays the image correctly I dont know if I have it too bright or not bright enough. Its kinda difficult because i want the image to be bright enough for all monitors to be able to display it but if its to bright the web site will look dumb. So I made several images with varying brightnesses. You can go to my web site and view the different pages with different backgrounds and tell me which one you think looks best (assuming they are all bright enough to display). Here is the list of the different pages and their background brightness.
www.thegamingedge.net
Home page: 15% (this is the original it is not visible on some monitors)
News: 20%
Call of Duty 4: 25%
Call of Duty: World at War: 30%
Gears of War 2: 35%
Halo 3: 40%
Rainbow 6 Vegas 2: 45%
Im trying to find an image that is bright enough to display on all monitors but not so bright that it does not match the rest of the website (i dont want it to look stupid).
If you could help me out here guys that would be much appreciated!!!
Thanks!
Figures. As said, I know my monitor has bad contast in the dark range. You know those step charts? Like the ones half way down this page http://www.normankoren.com/zonesystem.html . On the PC one, I see no difference between step 1 and 2. I think bad shadow contrast is typical of law quality or burnt out monitors, but that's just what *I* think. 
This monitor is fine otherwise, but I used to hang at photo forums for a while and I noticed people saw details in the shadows where all I saw was black.
This monitor is fine otherwise, but I used to hang at photo forums for a while and I noticed people saw details in the shadows where all I saw was black.
QUOTE(pandy @ Jan 12 2009, 08:33 PM)
Came to think of something. Do you use color management? Could the color space be embedded in the large image and that's what causes the problem?
Yes, it can.
http://www.mattcutts.com/blog/jpeg-problem...firefox-and-ie/
I start to see something as of 30% (very faintly) to 35% (faintly, not disturbing). More gets too clear.
Is the background repeating or should I look somewhere special? Because all I see is blackness. 
QUOTE(pandy @ Jan 22 2009, 03:49 AM)
Is the background repeating or should I look somewhere special? Because all I see is blackness.
Okay well I just made a bunch of adjustments to the image including exporting the image from illustrator into photoshop instead of just opening the illustrator file from photoshop. This fixed the problems with the RGB and CMYK mixing up. Illustrator uses CMYK and Photoshop uses RGB so when I was opening the illustrator file in photoshop all the colors were getting mixed up I think.
New background image at the same place: www.thegamingedge.net
With these new changes the image should be viable to all. If you still cant see it Pandy please let me know.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.