Advertising
y u no do it?

Advertising (learn more)
Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

Starts at just $1 per CPM or $0.10 per CPC.

css background image not showing in IE

Discussion in 'CSS' started by rumblepup, Jul 28, 2006.

Page 1 of 2

rumblepup Peon

Messages:

100

Likes Received:

2

Best Answers:

0

Trophy Points:

0

#1

I'm having a problem that I've never experience before. All of the sudden, My IE will not display my background images from my css. Everything works find in Firefox, but the only thing bieng rendered from my css are my text rules.

Here's my css. It's a little ugly right now, but I'm still developing. I've never had this happen to me. When I grab an old project, and view an html file in IE, with linked css, NO problem. I'm not even running it from my inetpub>wwwroot folder or from my http://localhost/ directive.

/* Default CSS Stylesheet for a new Web Application project BACKGROUND: url("images/layout/main_bg.jpg")White repeat-x center top;*/

BODY
{
BACKGROUND: url(images/layout/main_bg.jpg)White repeat-x center top;
FONT-FAMILY: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 11px;
MARGIN-LEFT: 0PX;
MARGIN-RIGHT: 0PX;
MARGIN-TOP: 0PX;
MARGIN-BOTTOM: 0PX;
PADDING-LEFT: 0PX;
PADDING-RIGHT: 0PX;
PADDING-TOP: 0PX;
PADDING-BOTTOM: 0PX;
}
a:link {
color: #000000;
}
a:visited {
color: #600000;
}
a:hover {
color: #ffffff;
background-color: #333333;
text-decoration: none;
}
a:active {
color: #222556;
}

H1, H2, H3, H4, H5, TH, THEAD, TFOOT
{
COLOR: #003366;
}
H1 {
font-family: Trebuchet MS, Verdana, Arial, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}

H2 {
font-family: Trebuchet MS, Verdana, Arial, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}

.tdHeader {
background: url(images/layout/gomovo_header.jpg)no-repeat left top;
height: 260px;
PADDING-LEFT: 10PX;
PADDING-TOP: 10PX;
}

.tdHeaderNav {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;

}

.tdFooter {
background: url(images/layout/footer_bg.gif)repeat-x center top;
height: 50px;
FONT-FAMILY: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px;
COLOR: #FFFFFF;
PADDING-TOP: 10PX;
PADDING-LEFT: 10PX;
}

.footerText {
FONT-FAMILY: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
FONT-SIZE: 10px;
MARGIN-TOP: 0PX;
MARGIN-BOTTOM: 0PX;
}

***********
MY HTML
***********
<HTML>
<HEAD>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>mysite</title>
<meta name="description" content="TODO: TEXT">
<meta name="keywords" content="keywords">
<meta name="robots" content="index, follow">
<meta revised="date">
<meta author="mysite">
<link rel="stylesheet" type="text/css" href="Styles.css">
</HEAD>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table1">
<tr>
<td valign="top" class="tdHeader"> </td>
</tr>
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="800" id="table2">
<tr>
<td width="180"> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" class="tdFooter"> </td>
</tr>
</table>
</body>
</HTML>

Again,

This works FINE in Firefox, where I usually have the worst problems, because I'm not the best css'r out there, but now I've got it perfect in Firefox, and IE, which usually is the easiest thing to code for, doesn't render the background images.

Any help?

rumblepup, Jul 28, 2006 IP
AdamSee Well-Known Member

Messages:

422

Likes Received:

28

Best Answers:

0

Trophy Points:

135
#2
BACKGROUND: url(images/layout/main_bg.jpg)White repeat-x center top;

Code (markup):

Should be:

background: white url(images/layout/main_bg.jpg) repeat-x center top;

Code (markup):
AdamSee, Jul 28, 2006 IP
rumblepup Peon

Messages:

100

Likes Received:

2

Best Answers:

0

Trophy Points:

0

#3

background: white url(images/layout/main_bg.jpg) repeat-x center top;
Click to expand...

Yeah, but what if I want the rest of the background to be white? How about

background: white url(images/layout/main_bg.jpg) #FFFFFF repeat-x center top;

Would that work as well?

rumblepup, Jul 28, 2006 IP
AdamSee Well-Known Member

Messages:

422

Likes Received:

28

Best Answers:

0

Trophy Points:

135
#4
Using the background property, you have to define things in this order:
background-color
background-image
background-repeat
background-attachment
background-position

Colour goes before the image, not after.

So it would just be

background: #ffffff url(images/layout/main_bg.jpg) repeat-x center top;

Code (markup):
AdamSee, Jul 28, 2006 IP
rumblepup Peon

Messages:

100

Likes Received:

2

Best Answers:

0

Trophy Points:

0

#5

whoops! didn't notice you changed the white location, even after I copied it. I see. But W3Schools doesnt describe it that way.

Thanks for the info.

rumblepup, Jul 28, 2006 IP
ticalico Greenhorn

Messages:

1

Likes Received:

0

Best Answers:

0

Trophy Points:

11

#6

I had same problem. What fixed it for me was to change the File format of the actual background image file from JPG to PNG. Not sure why the jpg would not work with respect to CSS and IE, but that did it for me. Hope this helps!

ticalico, May 18, 2009 IP
hanzray Peon

Messages:

1

Likes Received:

0

Best Answers:

0

Trophy Points:

0

#7

I have the same problem just now.
and found out the problem

my original css:
background:url(../images/title-photos.jpg) no-repeat center top;

after removing top position it works fine now.

background:url(../images/title-photos.jpg) no-repeat center;

i dunno about the issue in positioning the bg image though.
hope this helps

hanzray, Jul 26, 2009 IP
Neophiliac Peon

Messages:

1

Likes Received:

0

Best Answers:

0

Trophy Points:

0

#8

i've been having the same problem for the past 3 hours...
finally i tried using the "background-" definition instead of the "background" one and it worked...don't ask :S

here's my code:

original (didn't work in IE):
.bigservi .middle p{
background:url("/mercatsec/img/icon_info_gris.gif")no-repeat top left;
padding-left:35px;
position:relative;
width:880px;

}

alternative (worked in IE):
.bigservi .middle p{
background-image:url("/mercatsec/img/icon_info_gris.gif");
background-repeat: no-repeat;
padding-left:35px;
position:relative;
width:880px;

}

thanks for all the ones posting ideas

Neophiliac, Jan 14, 2010 IP
deathshadow Acclaimed Member

Messages:

9,491

Likes Received:

1,925

Best Answers:

247

Trophy Points:

515

#9

1) lose the all caps, that's invalid CSS.

2) condense your properties.

3) if you are only going to have ONE TD per table, what the **** are you using tables for?!?!

4) lose the double quotes around the URL in your CSS, they are unneccessary.

5) run-in on the no-repeat could be the problem, add a space after the )

6) Doctype goes BEFORE <html> and <head>, not after.

7), not only are PX fonts a miserable /FAIL/, and anything less than 12px a miserable /FAIL/ - setting such on body is damned near a cardinal sin.

8) Without a live copy, pretty much everyone here is guessing wildly in the dark. URL please? Unless we see it live, we're not going to be much help!

deathshadow, Jan 15, 2010 IP
Stomme poes Peon

Messages:

3,195

Likes Received:

136

Best Answers:

0

Trophy Points:

0

#10

i've been having the same problem for the past 3 hours...
finally i tried using the "background-" definition instead of the "background" one and it worked...don't ask :S

here's my code:

original (didn't work in IE):
.bigservi .middle p{
background:url("/mercatsec/img/icon_info_gris.gif")no-repeat top left;
padding-left:35px;
position:relative;
width:880px;

}

alternative (worked in IE):
.bigservi .middle p{
background-image:url("/mercatsec/img/icon_info_gris.gif");
background-repeat: no-repeat;
padding-left:35px;
position:relative;
width:880px;

}
Click to expand...

I think in your case it was the lack of space between the last ) and the word "no-repeat".

I saw a case where someone had
background: url(something.jpg)left top;
and IE died.
Changing it to
background: url(something.jpg) left top;
magically worked. Because IE for some reason required a space between the properties (and there really should be a space between properties) while other browsers were able to tell the difference.

Stomme poes, Jan 16, 2010 IP
linux Tips Peon

Messages:

1

Likes Received:

0

Best Answers:

0

Trophy Points:

0

#11

"Everything You Know About CSS Is Wrong! - Free 37 Page Preview!"

For web designers and developers who want to ensure they're using the very latest, best-practice CSS techniques.

Request Your Free White Paper now: linux.tradepub.com/free/w_sitb11/

linux Tips, Apr 24, 2010 IP
coldfiredesigns Member

Messages:

7

Likes Received:

0

Best Answers:

0

Trophy Points:

46

#12

Dont stress buddy. Send your html + css to my email. I'll fix it and send you back. coldfire_akshat[at]rediffmail.com
Please mention "html + css help required from Digital Point forums"

Last edited: Apr 25, 2010

coldfiredesigns, Apr 25, 2010 IP
thinkscrappy Peon

Messages:

3

Likes Received:

0

Best Answers:

0

Trophy Points:

0

#13

I have everything working exactly perfect in all browsers except in IE it simply will not load that background graphic. I tried everything that you guys suggested.

Here is the site: fashioncurrents.com/splash

Here is my CSS

<style type="text/css">
.changeborder:focus
{

outline-color: #660000;
outline-width: medium;

}
.changeborder
{

height:27px;

width:180px;

}

* { margin: 0; padding: 0; }

html {
background: url(images/splash_password.jpg) center fixed;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>

any ideas?

thinkscrappy, Dec 10, 2010 IP
MakingThisSucked Greenhorn

Messages:

46

Likes Received:

0

Best Answers:

0

Trophy Points:

16

#14

background-color
background-image
background-repeat
background-attachment
background-position
Click to expand...

If Adamsee is right, then that is probably your problem. You have your repeat after your position. Try this instead:

background-image:url(images/splash_password.jpg);
background-repeat:no-repeat;
background-position:center fixed;

Click to expand...

MakingThisSucked, Dec 11, 2010 IP
thinkscrappy Peon

Messages:

3

Likes Received:

0

Best Answers:

0

Trophy Points:

0

#15

Thanks for the help, but it is still not working in IE 8 and lower. It is super weird because once you click on the image it loads but it doesn't load automatically.. you can check it out at fashioncurrents.com/splash..

Thanks again,
Steve

thinkscrappy, Dec 12, 2010 IP

jeremyhowell Member

Messages:: 379

Likes Received:: 7

Best Answers:: 2

Trophy Points:: 45

#16

All I did was change the html { blah blah } to body { blah blah } and the background turned up.



<style type="text/css">
.changeborder:focus 
{ 

outline-color: #660000;
outline-width: medium;

} 
.changeborder
{


height:27px;

width:180px;

}

* { margin: 0; padding: 0; }

body { 
background: url(images/splash_password.jpg) center fixed;
background-repeat:no-repeat;	
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>

Code (markup):

jeremyhowell, Dec 12, 2010 IP

thinkscrappy Peon

Messages:

3

Likes Received:

0

Best Answers:

0

Trophy Points:

0

#17

HOLY SMOKES!!!! It worked. Thank you very much!

thinkscrappy, Dec 12, 2010 IP
jeremyhowell Member

Messages:

379

Likes Received:

7

Best Answers:

2

Trophy Points:

45

#18

No problem mate.

jeremyhowell, Dec 12, 2010 IP
Paris Vega Peon

Messages:

1

Likes Received:

0

Best Answers:

0

Trophy Points:

0

#19

Thanks for mentioning the spacing issue...

background:url(whatever.jpg)no-repeat; DOESN"T WORK IN IE
background:url(whatever.jpg) no-repeat; TOTALLY WORKS IN IE

Paris Vega, Mar 2, 2011 IP
Carl29 Active Member

Messages:

114

Likes Received:

0

Best Answers:

0

Trophy Points:

51

#20

Thanks for this post save my day

Post Scriptum: Why does MS does not dedicate themselves to make OS only...?

Carl29, May 16, 2011 IP

(You must log in or sign up to reply here.)

Page 1 of 2

Log in or Sign up

Advertising (learn more)

css background image not showing in IE

rumblepup Peon

AdamSee Well-Known Member

rumblepup Peon

AdamSee Well-Known Member

rumblepup Peon

ticalico Greenhorn

hanzray Peon

Neophiliac Peon

deathshadow Acclaimed Member

Stomme poes Peon

linux Tips Peon

coldfiredesigns Member

thinkscrappy Peon

MakingThisSucked Greenhorn

thinkscrappy Peon

jeremyhowell Member

thinkscrappy Peon

jeremyhowell Member

Paris Vega Peon

Carl29 Active Member

Log in or Sign up

Advertising (learn more)

css background image not showing in IE

rumblepup Peon

AdamSee Well-Known Member

rumblepup Peon

AdamSee Well-Known Member

rumblepup Peon

ticalico Greenhorn

hanzray Peon

Neophiliac Peon

deathshadow Acclaimed Member

Stomme poes Peon

linux Tips Peon

coldfiredesigns Member

thinkscrappy Peon

MakingThisSucked Greenhorn

thinkscrappy Peon

jeremyhowell Member

thinkscrappy Peon

jeremyhowell Member

Paris Vega Peon

Carl29 Active Member

Useful Searches