So I normally consider myself quite apt at CSS/HTML, but this one has me stumped. A Mate and myself made www.dangerousdavemedia.com as a challenge to ourselves in <8 hours. I know it's not 100% semantic and whatnot, but that's not the isssue here. It looks right in Firefox, looks ok in Chrome and Safari. When opening the page in IE7/8 (9 not tested), and in Opera (latest one on the mac), the <body>-attached background picture doesn't show. Opera Drangonfly shows that the path is right and that it DOES download the image, but doesn't show it. I have tried adding a new div and attaching the image there, to no avail. I have tried adding it to the <html> element, and that also doesn't work. I have tried specifying the width and height of the <body> element, which also doesn't work I have tried googling this issue, and found about two million options, but none that seem feasible. Any thoguhts would be appreciated.
Code: background-image: url(http://www.dangerousdavemedia.com/images/bg_explosion.png); When using URLS do Code: background-image: url('http://www.dangerousdavemedia.com/images/bg_explosion.png'); This might be your problem, you did it on the other images except this one. I never user the whole URL why can't you just use Code: background-image: url(images/bg_explosion.png);
I changed that in an attempt to fix it... anything int he url() bit doesn't technically need quotes. and yes, I could use relative paths, but I have in the past picked up issues between relative paths and .htaccess rewrite rules (which I use for the URLs). So no... that's not the issue.
I just opened it in both IE9 and Firefox 8 and it looked identical. I'm guessing you have fixed it in the intermediate term? If not and its just me .... I put the following internet explorer tag in all my pages now as it forces both IE8 and IE9 to behave much 'better' - this may help you out. <meta http-equiv="X-UA-Compatible" content="IE=edge" /> Also, I know the url doesn't technically need the single quotes, but I always use them and I've only ever seen them used so maybe it will help?
Like I said - I added and removed them to try to debug issues - makes no difference in either browser. if IE 9 and FF look the same, that's good neews... that' means that IE9 renders it correctly. Will try the IE fix you posted. The issue seems to be Opera and IE7/8
try background: url(http://www.dangerousdavemedia.com/images/bg_explosion.png) no-repeat top center; And those absolute URL's are Fugly. Get rid of them.
so shorthand rather than the long form? As for the shorthands - it's a dirty workaround for Mod-Rewrites in Apache...
I usually absolute link from top level so /images/whatever.jpg and then add images to exclusions list.
you could do something like this.... background: url(../Images/Image.jpg) no-repeat top left; Would make it easier when working on a local PC too. Saves uploading all of your images to the live site while in development.
Images as an exception is a good idea... but yah... that's something one can work around... the issue I have is the image loading (according to Dragonfly) but not showing... so it's not a path issue...
No because then its a relative path and not an absolute path... When you hit mydomain.com/ it'll try ../images which is above webroot, and won't exist. When you hit mydomain.com/folder1/folder2/ it'll try ../images which is mydomain.com/folder/images which also won't exist If you do /images/myfile.ext in all your code, wherever you reference the CSS will always check the images folder within the webroot folder. My .htaccess for reference: Code: RewriteEngine on RewriteCond $1 !^(index\.php|images|js|css|robots\.txt) RewriteRule ^(.*)$ /index.php/$1 [L] My folder structure looks like a simple variation of: /http_root/ /http_root/.htaccess /http_root/index.php /http_root/robots.txt /http_root/css/ /http_root/images/ /http_root/js/
Yup... Zoon - that's what I was thinking as well. Have rep for that. As for the bug - I fixed it, and it had nothing to do with paths, shorthand or quotes... The background image is quite tall. As such, Opera and IE7/8 wouldn't show it. Body can not be set to a min-height in all browsers, and it would be really whack to set a min-height of, say 1800px on a page that has 3 lines of content and needs less. So I trimmed the height of the image down, and VOILA! so we learn.
Thanks for the rep - I tend to use codeigniter for my websites (even the easy ones) as its so quick, and this is the folder structure I've begun to work with as a result. Not shown obviously are the hidden folders above webroot where all the good stuff is kept Yeah min-height is a funny one, its not very compatible as you say. I try to avoid it. You'd be much better (where possible) to use a tesselating square background, which in honesty is what I'd assumed you had done :thumbs:
The stripey pattern behind is just taht... a pattern... the 'splosion would've been a bit difficult like that. My folder structure looks a lot like that, zoon... and that's without me using codeigniter... just good practise, i suppose.
About 70% of people, according to 4 weeks of moderate-traffic data I have (that's about 500 page views a day... 100-odd visits daily)
