14 replies [Last post]
kevinwasie
kevinwasie's picture
Offline
Regular
cleveland ohio
Last seen: 5 years 41 weeks ago
cleveland ohio
Joined: 2008-10-15
Posts: 16
Points: 0

Hello-
Thanks in advance for any assistance!

I have created a website that uses css to display a background image. Sometime the image will appear, and sometimes it will not. I am not sure if it is a CSS issue, or with how I created the background maybe, but any help would be appreciated.

I have included the code below.

The website address is http://www.suetirrell.com

body {
	background-image: url(<a href="http://suetirrell.com/images/main/background.gif" rel="nofollow">http://suetirrell.com/images/main/background.gif</a>);
	background-repeat: repeat-y;
	background-attachment:fixed;
	background-position: top center;
	margin:0px;
	padding: 0px;
	text-align:center;
	background-color: #C4DADB;
	height:101%;
}

Like I said, sometimes it works, sometimes it does not. I have tried the website at school, and at my home. It will come up one time, and then wont the next.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 year 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Try referencing the image as

Try referencing the image as www.suetirrell.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kevinwasie
kevinwasie's picture
Offline
Regular
cleveland ohio
Last seen: 5 years 41 weeks ago
cleveland ohio
Joined: 2008-10-15
Posts: 16
Points: 0

Did not work

Tyssen wrote:

Try referencing the image as www.suetirrell.

Thank you, but that did not seem to have any affect.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 2 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

The way it is now with the

The way it is now with the www is definitely incorrect. Without "http://" in front, the browser thinks it's a "local" url and starts looking in the same folder as your web page (www.suetirrell.com) so right now it's http://www.suetirrell.com/www.suetirell.com/images/blahblah blah... which of course doesn't exist. You should be able to have a local url no problem: url(images/nameofimage.blah)

But originally you had it with http and it showed up sometimes... in all browsers? IE? At first I though this was an IE6- disappearing background bug due to no layout on the element but this bg is on the body which always has Layout anyway so that's not it.

You DO have a lot of scripts and I wonder if sometimes the background isn't loading because the scripts are never finished loading? Have you checked (in as many browsers as possible) your site with all the scripts removed?

Also, you have some strange and possibly dangerous stuff in your CSS.

* {
height: 101%;
}
That's making everything try to be greater than 100%. Everything. Obviously most things are NOT doing that (a good thing) because most elements only can has height other than auto IF their direct parents have a (non-%) height.

You also have it on the html element. Now IE does consider "html" to be just another element but it's not, it's a bit different and there are special rules for it (which I only skimmed over once and never went back to read again : )

For a 100% height page, do it like this:

* {
use this to zero out margins and padding (unless you have forms)
}

html, body { /*as far as I know, html is mentioned here for the benefit of IE*/
height: 100%;
}

body {
all other body stuff including your bg image;
position: relative;
}

#container /*some element who is a direct child of the body and wraps the entire website*/ {
min-height: 100%;
whatever other stuff you want...
}

* html #container {height: 100%;} /*for IE6 and below*/

something like that, although if you have the 100% high page JUST so the body can hold the bg image and stay large, the body can be 100% height I think by default (we're only setting it here so a child can haz a height). Since the html element is the "canvas" (everything that's screen) of the web site it's already height and width 100% (it can't be any less) and so the body usually is as well by default.

So the code above was only if there was yet another container, holding the whole page, who needed to always stretch to the bottom of the browser window no matter how little content there is.

Re the scripts, as far as the DreamBeaver MM_swappie thingie, CSS does that better (but takes some time to learn). I'm not sure what the get obj thing is, didn't look closely as I don't jabba da script. But I know you can get rid of the mm swap for the nav.

If temporarily removing the scripts lets the background always appear, and adding the scripts back makes it act goofy again, you'll have to try rewriting them.

I'm no expert, but I fake one on teh Internets

scope1000
Offline
Regular
Last seen: 5 years 38 weeks ago
Joined: 2008-10-30
Posts: 33
Points: 0

Well its puzzled me.

Well its puzzled me. Although I have encountered this issue in the past myself.

I've taken the page apart, removed the script links, remove the unwanted tags and the 'z' after the closing tag in the css file/s. Removed everything from the body tag apart from the call to the background image and nothings working. The only thing that worked is writing the css in the head of the page itself.

It could be something simple I'm overlooking I guess but I've tried various solutions and now I'm getting confused myself, lol.

If it were me I'd just put the css for the bg image in the head of the page and move on quickly.

scope1000
Offline
Regular
Last seen: 5 years 38 weeks ago
Joined: 2008-10-30
Posts: 33
Points: 0

Ok after much testing and

Ok after much testing and trying to remember back as to why this wouldn't work for me it transpires that background images can have issues UNLESS the css file is directly within the site root folder itself.

So this will work:

Whereas this will most likely fail:

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 2 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Osgood: but you were able to

Osgood: but you were able to access the bg image itself no problem, right?

*edit, posted at same time. I haven't heard of this before... why is it only affecting the single bg image and not, say, the other images too?

When this happened before, was it only on very large images?

I'm no expert, but I fake one on teh Internets

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 19 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9170
Points: 3160

On body, modify this line of

On body, modify this line of css as shown:background:#C4DADB url(/images/main/background.gif) repeat-y fixed center top;

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 19 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9170
Points: 3160

@scope1000: The css file

@scope1000: The css file can reside anywhere under the document root. The bg image path is from the css file's location, unless the initial "/" is used to denote the path from the doc root.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 2 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Gary, wouldn't that just be

Gary, wouldn't that just be the same as what he had above, except with an "outside" url?

body {
	background-image: url(<a href="http://suetirrell.com/images/main/background.gif" rel="nofollow">http://suetirrell.com/images/main/background.gif</a>);
	background-repeat: repeat-y;
	background-attachment:fixed;
	background-position: top center;

I mean, that's nasty but it should absolutely work.

I'm no expert, but I fake one on teh Internets

scope1000
Offline
Regular
Last seen: 5 years 38 weeks ago
Joined: 2008-10-30
Posts: 33
Points: 0

Right, good call Gary,

Right, good call Gary, should have spotted that!

I tend to hand code all my css in the head of the page in Dreamweaver then when finished dump it into a linked css file and of course DW updates all the links automatically, so I never look too closely. If I had I see some leading slashes infront of the files, lol.

Notes it down for future reference.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 19 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9170
Points: 3160

When I use this,

When I use this, "http://suetirrell.com/images/main/background.gif", I get this

Quote:

Application Firewall Alert

Your request triggered an alert! If you feel that you have received this page in error, please contact the administrator of this web site.

To immediately resolve this problem. You can login to your hosting control panel->security->Security guard and set the security guard to Medium Level for your domain name.

The server configuration may be causing the loading to not occur. Maybe it's a referer thing, for thwarting direct linking to images.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

scope1000
Offline
Regular
Last seen: 5 years 38 weeks ago
Joined: 2008-10-30
Posts: 33
Points: 0

Quote: Osgood: but you were

Quote:

Osgood: but you were able to access the bg image itself no problem, right?

Quote:

No, I could'nt get it into the document at all the way I was doing it. Only when I moved the css file to the root folder itself or wrote the style in the head of the page did it appear.

Mind, I confuse myself sometimes when I expect something to work and it doesn't.

kevinwasie
kevinwasie's picture
Offline
Regular
cleveland ohio
Last seen: 5 years 41 weeks ago
cleveland ohio
Joined: 2008-10-15
Posts: 16
Points: 0

gary.turner wrote:On body,

gary.turner wrote:

On body, modify this line of css as shown:background:#C4DADB url(/images/main/background.gif) repeat-y fixed center top;

cheers,

gary

Gary-
That seemed to work. Was the only problem then with the way that I was referencing the bgimage? I just want to make sure that none of my javascript was causing the error before moving on.

Thanks for everyone help! I appreciate it.
kevin

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 19 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9170
Points: 3160

As near as I can figure, the

As near as I can figure, the problem lies with your server configuration. Doing as I showed you seems to bypass the problem.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.