Jump to content

Background help


TrueGrave
 Share

Recommended Posts

background-image: url(../HTML/x.jpg);background-repeat: no-repeat;Is what I have as the css background, and it fits well. The only problem is that it doesn't take up the entire screen so there is a white space when fully maximized.And is there a way to make is that the screen gets smaller instead of it over lapping the site itself when messing around with the browser size.Thanks in advance.

Edited by TrueGrave
Link to comment
Share on other sites

You can't resize the background dynamically - you'll have to make it tile or use an image tag acting as a pseudo-background.

Link to comment
Share on other sites

I got it to work (with your help jkloth) perfectly,but ._.now the banner and the navigation bar is completely gone. I don't know if it was maybe a mistype on my code but I can't seem to get it back, the page is basically my background, and nothing on it.

	{		padding:10px;		font:76% "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Geneva, Arial, Helvetica, sans-serif;}#banner {height: 110px;width: 840px;margin: 0px auto;}#bg_img {position: fixed;top: 0;left: 0;z-index: 0;height: 100%;width: 100%;}li{display:inline;}#nav {width: 45%;margin: 0 auto;}#nav li {float: left;}#nav li a {text-decoration:none;padding:0px 0;width:80px;background:silver;color:black;float:left;font: 100% "Arial"}

<!DOCTYPE html PUBLIC "-//W3C DTD HTML 4.01//EN"><html><head><title> Hunterz </title><link rel="stylesheet" href="mystyle.css"></title></head><body> <img src="Hunterz Background.jpg" id="bg_img"/><div id="wrapper"></div><div id="banner"></div><div id="nav"><ul id='><li><a href="mainpage.htm">Home</a></li><li><a href="register.htm">Register</a></li><li><a href="story.htm">Story</a></li><li><a href="characters.htm">Characters</a></li><li><a href="forums.htm">Forums</a></li></ul></body></html>

Edited by TrueGrave
Link to comment
Share on other sites

I wonder...I think maybe all your stuff is behind the image. I think the z-index is acting goofy. Try putting all your content (but not the img tag for your background) inside a content wrapper div and set the z-index of the wrapper to something like 5 to bring it in front of your background image:

<!DOCTYPE html PUBLIC "-//W3C DTD HTML 4.01//EN"><html>...<body><img src="Hunterz Background.jpg" id="bg_img"/><div id="wrapper"><div id="banner"></div><div id="nav"><ul id='><li><a href="mainpage.htm">Home</a></li><li><a href="register.htm">Register</a></li><li><a href="story.htm">Story</a></li><li><a href="characters.htm">Characters</a></li><li><a href="forums.htm">Forums</a></li></ul></div></body></html>

I see you already have a <div id='wrapper'> so I just moved the ending tag to include everything on your page.Anyway here's the CSS that should go with that wrapper div:

#wrapper {   z-index: 5;}

Link to comment
Share on other sites

I thought z-indexing only worked on absolutely, relatively, or fixed positioned elements. Would you have to give the other div's positioning attributes as well?

Link to comment
Share on other sites

I did exactly that, and what it did was create some white border around the background :Sthe border and navi is still not visible either.
Did you try changing the position of the div as scientist suggested above?Edit: relative would be best, as it won't mess up anything with the layout. Edited by jkloth
Link to comment
Share on other sites

why add relative and z-index to any other element? when you can just set the image to z-index:-1; it has positioning and its a background image.Edit: small note, IE6 not really happy with the use of position: fixed;

Edited by dsonesuk
Link to comment
Share on other sites

why add relative and z-index to any other element? when you can just set the image to z-index:-1; it has positioning and its a background image.Edit: small note, IE6 not really happy with the use of position: fixed;
I was under the impression that negative z-indexes are bad news for cross browser compatibility. Is that not the case?And who cares about IE6? IE6 should be put out of its misery, go the way of Old Yeller, if you know what I mean. :)
Link to comment
Share on other sites

No matter what I do it stays the same (background with white border on the back)Maybe I did something wrong here?

  <!DOCTYPE html PUBLIC "-//W3C DTD HTML 4.01//EN"><html>...<body><img src="Hunterz Background.jpg" id="bg_img"/><div id="wrapper"><div id="banner"><div id="nav"><ul id='><li><a href="mainpage.htm">Home</a></li><li><a href="register.htm">Register</a></li><li><a href="story.htm">Story</a></li><li><a href="characters.htm">Characters</a></li><li><a href="forums.htm">Forums</a></li></ul></div></body></html>

body 	{	  padding-right: 11em;  font-family: Georgia, "Times New Roman",   Times, serif;	color: red;	background-image:url('Hunterz Background.jpg');	background-repeat:no-repeat;	}h1 {  font-family: Helvetica, Geneva, Arial,	SunSans-Regular, sans-serif 	}	{		margin:0px auto;		padding:0px;		color:red;		background:white;	}	body 	{		padding:10px;		font:76% "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Geneva, Arial, Helvetica, sans-serif;}#banner {height: 110px;width: 840px;margin: 0px auto;}#wrapper {   z-index: 3;}#bg_img {position: relative;top: 0;left: 0;z-index: 0;height: 100%;width: 100%;}li{display:inline;}#nav {width: 45%;margin: 0 auto;}#nav li {float: left;}#nav li a {text-decoration:none;padding:0px 0;width:80px;background:silver;color:black;float:left;font: 100% "Arial"}

Link to comment
Share on other sites

You're missing the closing </div> tags on these two:<div id="banner"><div id="nav">

<div id="wrapper"><div id="banner"><div id="nav"><ul id='><li><a href="mainpage.htm">Home</a></li><li><a href="register.htm">Register</a></li><li><a href="story.htm">Story</a></li><li><a href="characters.htm">Characters</a></li><li><a href="forums.htm">Forums</a></li></ul></div> <!-- End of nav div; must contain all of the <ul> --></div> <!-- End of banner div; contains nav div as well as whatever else you want in the banner --></div> <!-- End of wrapper div; contains all of your content -->

Edit: I just noticed your <ul> has an incomplete id.

Edited by jkloth
Link to comment
Share on other sites

Did that, still the same.Argh I don't even know what caused this problem.Ah wow, how did I not notice that. I think it's because I was trying to do something.. but I forgot what Lol.even if I use it as <ul>/ </u> it still displays the same way.

Edited by TrueGrave
Link to comment
Share on other sites

z-index using - seems to be problem if used on container, i've used it on few occasions with no problems, in all browsers.display:block; is required try this <!DOCTYPE html PUBLIC "-//W3C DTD HTML 4.01//EN"><html><style type="text/css">body { padding:10px; font:76% "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Geneva, Arial, Helvetica, sans-serif;}#banner {height: 110px;width: 840px;margin: 0px auto;}#bg_img {position: fixed;top: 0;left: 0;z-index: 0;height: 100%;width: 100%;z-index:-1;}li{display:inline;}#nav {width: 45%;margin: 0 auto;}#nav li {float: left;}#nav li a {text-decoration:none;padding:0px 0;width:80px;background:silver;color:#fff;float:left;font: 100% "Arial";display:block;}</style></head><body><img src="AVP-Predator_1024.jpg" id="bg_img"/><div id="wrapper"></div><div id="banner"></div><div id="nav"><ul id="menu"><li><a href="mainpage.htm">Home</a></li><li><a href="register.htm">Register</a></li><li><a href="story.htm">Story</a></li><li><a href="characters.htm">Characters</a></li><li><a href="forums.htm">Forums</a></li></ul></div></div></div> </body></html>

Edited by dsonesuk
Link to comment
Share on other sites

Sorry about that.

 <!DOCTYPE html PUBLIC "-//W3C DTD HTML 4.01//EN"><html><head><title> Hunterz </title><link rel="stylesheet" href="mystyle.css"></title></head><body> <img src="Hunterz Background.jpg" id="bg_img"/><div id="wrapper"><div id="banner"></div><div id="nav"><ul id='><li><a href="mainpage.htm">Home</a></li><li><a href="register.htm">Register</a></li><li><a href="story.htm">Story</a></li><li><a href="characters.htm">Characters</a></li><li><a href="forums.htm">Forums</a></li></ul></div></body></html>

Link to comment
Share on other sites

Scratch what I had. I see the real problem:body {padding:10px;font:76% "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Geneva, Arial, Helvetica, sans-serif;}You have a 10px padding on the body which is going to create space around anything within it. Set padding to 0px; and then set the padding of your wrapper div to 10px instead. In a situation like this you want to treat the wrapper div as the body element. So anything you want to apply CSS-wise to the body should be applied to the wrapper instead.

Edited by jkloth
Link to comment
Share on other sites

I often find it best to leave styles out of <body> and <html>. Generally, if I need to style something, its already in a tag, and can be targeted that way. Well, save background color/img, that I would do on the body.kinda similar in concept to avoiding globals when programming.

Edited by thescientist
Link to comment
Share on other sites

I often find it best to leave styles out of <body> and <html>.
I'll agree with you on the <html> tag but <body> not quite so much. Sure there are lots of things that I wouldn't put in the body, but I often have padding in the body, or background stuff as you mention. Actually, now that I think about it, that's about all I use, so I guess you're right! :)
Link to comment
Share on other sites

I'll agree with you on the <html> tag but <body> not quite so much. Sure there are lots of things that I wouldn't put in the body, but I often have padding in the body, or background stuff as you mention. Actually, now that I think about it, that's about all I use, so I guess you're right! :)
ba-dump-ba! :)
Link to comment
Share on other sites

So then it should look like this? body { padding:0px; font:76% "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Geneva, Arial, Helvetica, sans-serif;}#banner {height: 110px;width: 840px;margin: 0px auto;}#wrapper { padding:10px;}If so, the problem remains.and now the navigation bar is at the bottom of the page..lol what the ###### caused all this >.<

Edited by TrueGrave
Link to comment
Share on other sites

remove one of the two closing title tags you have from html page, and in the css file, move padding from body to wrapper should look like thisbody {font:76% "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Geneva, Arial, Helvetica, sans-serif;}#banner {height: 110px;width: 840px;margin: 0px auto;}#bg_img {position: fixed;top: 0;left: 0;height: 100%;width: 100%;z-index:-1;}li{display:inline;}#nav {width: 45%;margin: 0 auto;}#nav li {float: left;}#nav li a {text-decoration:none;padding:0px 0;width:80px;background:silver;color:#fff;float:left;font: 100% "Arial";#wrapper{padding:10px;}and html page like this<!DOCTYPE html PUBLIC "-//W3C DTD HTML 4.01//EN"><html><head><title> Hunterz </title><link rel="stylesheet" href="mystyle.css"></head><body><img src="Hunterz Background.jpg" id="bg_img"/><div id="wrapper"><div id="banner"></div><div id="nav"><ul id="menu"><li><a href="mainpage.htm">Home</a></li><li><a href="register.htm">Register</a></li><li><a href="story.htm">Story</a></li><li><a href="characters.htm">Characters</a></li><li><a href="forums.htm">Forums</a></li></ul></div></div></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

Truely impressive work dsonesukYou fixed the background and the navigation bar perfectly.Now the only problem... (sigh)is the banner, it's not showing up.I set up my style and html exactly the way you did

Edited by TrueGrave
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...