Background Image Not Displaying Properly

Kadigan · March 29, 2014

Hi,

I'm a total newbie at CSS, and I can't figure out why things aren't working, or what to do to fix them. Right now I'm having trouble with a background image: I've specified a height and width, but the full height of the image isn't appearing.

#navigation {

width= 960px;

height= 388px;

padding: 20px 0 0 0; /*top right bottom left*/

margin: 0 0 0 0; /*top right bottom left*/

background-image: url(zeitgeist_images/buts/header.png);

background-repeat: no-repeat;

background-position: center top;

}

Can someone tell me what I'm doing wrong? Should I just increase the padding until the image is visible?

I also want to place some png buttons on top of the background. How can I do that?

Thanks!

Andrea · March 29, 2014

How big is the image?

Do you have the page you're working on online somewhere? It's always easier and faster to help if we can see everything you're working with.

Unrelated Hint: Since your margin is zero all around, you can short-cut the code by simply writing: margin: 0;

Also, the height and width you're specifying affects your navigation division, not your background image.

And you can add png buttons to your HTML or to the CSS that applies to html tags.

Kadigan · March 29, 2014

How big is the image?

Do you have the page you're working on online somewhere? It's always easier and faster to help if we can see everything you're working with.

Unrelated Hint: Since your margin is zero all around, you can short-cut the code by simply writing: margin: 0;

Also, the height and width you're specifying affects your navigation division, not your background image.

And you can add png buttons to your HTML or to the CSS that applies to html tags.

Thanks for your reply! I hadn't uploaded the site yet, since I was trying to get it to work on my computer first, but now I've put it up at 2ndcycle.com/zeitgeist. Please excuse the html, I'm used to just putting everything into tables!

The image was the size I set the navigation div to - if the division is that size, shouldn't it show the full image? I'm confused. :-/

The buttons are currently in a table in the html, but I'd like to put them in the CSS. Not quite sure how to, though...

falkencreative · March 29, 2014

At least according to your CSS code above, you have an error when setting the height and width:

width= 960px;
height= 388px;

You shouldn't be using "=" -- you need to be using ":" instead. Fix that, and see if that fixes your problem?

Kadigan · March 29, 2014

Thank you, that did fix the #navigation problem! Now the other 2 IDs images are freaking out, though. I'll upload again in a minute so you can see what I mean.

Andrea · March 29, 2014

OK - let's start at the beginning:

You're missing the doctype declaration. The easiest way to go these days is to use the HTML5 one:

<!DOCTYPE html>

The forget frames. They are outdated, inconvenient, and have a whole laundry list of problems. Don't use them. You can achieve the same results with PHP Incluces. Watch Stef's video about this:

http://www.killerphp.com/videos/02_php_includes/02_php_includes.html

Also, you're not even using frames the way they are intended to be used. Normally, you would put parts that are the same on your whole site, for example the banner, the navigation, or the footer, into a frame and then insert that frame into your pages. That way, when you need to make a change to any of those parts, you only have to do it one time for the entire site. But as I said, the php includes are much better for that.

For the purpose of trying to help you out here, I'm not going to use the includes, as I'll just be working on one page.

The center tag has been deprecated for years. Don't use it. Center your stuff with CSS.

Also deprecated are the font tag

Don't define your h1 tag in the html, that's what the css is for.

Forget all the tables - now we lay out websites with CSS. Just use divisions.

Your navigation is a list and should be codes as such. And forget JavaScript for hovers - CSS can do that so much better.

...

I see Ben's been helping while I'm typing this. He definitely knows his stuff.

Overall, after looking at your code for a bit and assuming that you're actually wanting to learn HTML and CSS, I would suggest you follow a few basic tutorials and start over. Definitely ditch your one frame and all the tables, and just start from scratch coding the right way. If you have any questions, let us know, we're happy to help.

.

Kadigan · March 29, 2014

I'm afraid I am not understanding this very well. So would my index.php file read,

<?php

@include("zeitgeist home.html")

?>

Otherwise, how would I reference my homepage?

How can I use lists to add my buttons, when I only want the list in the navigation div to display them, and regular lists everywhere else?

I still haven't figured out what's wrong with my background images.

I've already been through 4 CSS tutorials without understanding what is going on; I was hoping someone here could help me.

Andrea · March 29, 2014

You don't include an entire page, only certain parts. For example, on you index.php you have

A header (with you banner and site name)

A navigation (the main navigation for the entire site - like your 'Home - Settings - Cast - Rules - Archives'.

The main content, where you talk about what your page is all about or whatever.

Your footer with copyright info and such.

On any ohter pages of your site, your header, navigation, and footer would be exactly the same as on index, but the main content would be different. For this reason, you would write separate files - one for header, one for navigation, and one for footer, and then you would include these different parts into each page of your site. That way, if you needed to make a change in the footer, all you had to do was change your footer.inc file, and the change would automatically show all over the site.

Does that help to explain things?

Kadigan · March 30, 2014

Are you saying that index.php would call all my background elements, which would then appear on all my pages if I set them to call on index.php? I thought I was using CSS to call and place the background elements? I'm sorry, I'm very confused.

Here's how I imagine it:

index.php calls my homepage, which has includes for the footer (since the header is different on every page, it's just text so I can put it in the body) and possibly the navigation? (Though on some pages the navigation shouldn't appear.) Not sure how this involves CSS.

Then on each page I just have body content, while calling the CSS for the backgrounds, and possibly the includes(?).

Andrea · March 30, 2014

I'm sorry I have confused you. CSS has nothing to do with includes specifically, but has everythign to do with websites. The only reason I even started talking about includes is because you built your website using frames.

index.php does not call your homepage, index.php IS your homepage.

Maybe for the time being, disregards this topic and focus on building a website built with clean, standard-compliant and current HTML and CSS.

But yes, background images are defined in your CSS.

Andrea · March 30, 2014

For now, I suggest you take ALL the code you have on this page:

http://2ndcycle.com/zeitgeist/zeitgeist%20home.html

and make that your index page: http://2ndcycle.com/zeitgeist/

Everything you have on there right now:

<html>
<head>
     <title>
		Zeitgeist
	</title>
	<META  name="keywords" content="RPG, RPGs, role-playing, roleplaying, PBEM, play-by-post, 
play-by-web, play by email, adventure, good writing, Pathfinder, rollespil">
	<META  name="description" content="The Zeitgeist PBEM.">
</head>

<FRAMESET border=0 borderColor=#3366ff frameBorder=0 frameSpacing=0 rows=*>
<FRAME scrolling=auto name="display" src="zeitgeist home.html">
</FRAMESET>
</HTML>

can go. You don't need this frameset stuff at all, just build a regular website. Then start focusing on the coding errors you have in there.

For Starters, the navigation menu. You have

<ul>
<a href="zeitgeist home.html">
<li><img src="zeitgeist_images/buts/nav-home1.png" border=0 
alt="Home" name="nav-home" onMouseOver="over(0)" onMouseOut="out(0)">
</a>

but it should be:

<ul>
 <li>
<a href="zeitgeist home.html">
<img src="zeitgeist_images/buts/nav-home1.png" border=0 alt="Home" name="nav-home" onMouseOver="over(0)" onMouseOut="out(0)">
</a>
</li>
....
</ul>

Overall, ditch the tables alltogether. Tables are meant to display tabular data. They are no longer needed for layout.

Kadigan · March 30, 2014

Oh, I see. Thank you for your help!

I've erased all the tables except the table I want for my content.

I almost have the background working now, but instead of the stretchy part (tiling image that continues for as long as there is text in the div) beginning below my middle image, it is beginning behind it. I tried moving the div below the other one, but then it covers everything or the stretchy part is gone!

The navigation list doesn't appear to be calling the images, which are still in the html as well. I'm also not sure how I can get the CSS to switch images out during hover. Or to link the specific images to the html for that matter. Can all this be defined in #navigation?

These are the two things I'm struggling to understand.

Andrea · March 30, 2014

I'm not at my computer for the next few hours and haven't looked into working with code on my ipad, so I cannot be of much help at the moment.

You don't need tables, I'll work on the code for table less layout when I get back home,

For the navigation, look int CSS hover, and if the images don't appear it's probably a path issue.

Andrea · March 31, 2014

I have a little time right now. Let's get started:

In your head section, you're missing the charset. See http://www.w3schools.com/tags/ref_charactersets.asp for explanation.

Deleteing the base target tag you have in your code - target self is default, so not really needed, and it's in the wrong spot. http://www.w3schools.com/tags/tag_base.asp.

Instead, I'm creating a wrapper division at a set width and centered that holds all the parts of your site.

The center tag is deprecated, instead, I'm centering and formatting the h1 via CSS. Btw, you did use CSS for some of the h1 formatting,but the details you had added via inline styling overwrote what is in your stylesheet.

In your navigation list, I'm removing the 'border: 0, as that's been taken care of with my universal reset. (* {margin, padding, and border: 0). Also, it should have been written border="0" - you forgot the quotes around the zero.

I'm out of time for the moment. I started cleaning up your HTML - I'll tackle the layout with the CSS sometime this evening. Here is what I have so far (And no, it doesn't even look close to right, but that's because I have not yet started with the CSS. All the pieces are there, so. CSS will do the rest.) http://aandbwebdesign.com/KSforum/zeitgeist.html

Kadigan · March 31, 2014

Wow, thank you for taking the time to do this! I think I will learn a lot by seeing how you tackle the design. Is it all right if I ask you if I have any questions about anything specific that you do?

Andrea · March 31, 2014

Is it all right if I ask you if I have any questions about anything specific that you do?

Of course. That's the whole point

Andrea · April 2, 2014

Sorry I haven't had as much time to work on this as I'd like to, but it seems that I can no longer access your images. Did you change your settings? Only yesterday, I got your images, now I get a 403 forbidden... makes it hard for me to work on stuff.

Kadigan · April 2, 2014

No, I didn't change anything. The site is still appearing for me with all pictures, though it takes a while to load them. If you spelled any part of the name of the site with capital letters, you might get that error, though - or if you forgot to add zeitgeist to the end of 2ndcycle.com.

Edited April 2, 2014 by Kadigan

Andrea · April 2, 2014

That's weird. I didn't spell anything, merely copied the paths to your images out of your code and added the 2ndcycle.com/zeitgeist/ for this:

http://2ndcycle.com/zeitgeist/zeitgeist_images/buts/header.png

which worked a couple days ago, but now the exact same code no longer displays the images in my WIP version, nor do they come up when I put that path into the browser - and they did a couple days ago.

Andrea · April 11, 2014

I've made some progress -- and it only took 2 weeks :unsure:

http://aandbwebdesign.com/KSforum/zeitgeist.html

The tables are totally gone, and so are the navigation images - it doesn't look identical to what you have, but pretty close, I think. There is still some more tweaking to be done, but the basics are all in place. One issue I have right now and haven't figured out how to solve is the background behind the main part - if I add the tan background color to cover things if the content goes beyond the size of the image, I lose the transparency effect around the top edge. I'll have to think about that one - or does somebody around here have a better approach to this topic?

I left some comments in my code and CSS explaining what I did and why. If something still doesn't make sense, let me know, and I'll try to explain.

Kadigan · April 11, 2014

Thank you very much for helping me out! I think I understand what you've done. It's very helpful to have an example to see how it should be done. The background seems a bit tricky! Is it possible to limit it to the area between the top image and the bottom image? Or maybe just use the background image that's 2 colors between them? Would it still expand to fill the area without having to worry about what div the text was in?

I would still like to see how you switch out images in the navigation if possible, since I have other sites where the navigation is an image rather than text. Or maybe it is better to use a table right there, since if the image doesn't load the alt text appears?

Andrea · April 11, 2014

It's NEVER better to use a table, unless you really do have tabular data to display. Forget tables for layout - that's so 1990s.

If you want to use images for buttons, apply a background image to each li for your a:link and then the other one to your a:hover. The JavaScript method you have now is not wrong, just not the best way to go about it - too much code, and if someone has JavaScript turned off, things won't work for them.

As to the background image - if you had a 'regular' image, as in no transparency, we'd just add the image and then a background color to match, so if there is more content than image, it'll have the background color applied. It just doesn't work here because of the transparency around the upper edges of your 'scroll' - once I add the color, it'll show under the transparency instead of the wooden background.

Now, it it were a shorter image, we could apply it somewhere to the top of that div and then use color for the rest, but it's pretty high, so that won't work. I imagine there is a solution for this, I just haven't figured it out.

Kadigan · April 13, 2014

I've tried to add the background images in the navigation, but they all appear on top of each other in every field - and I don't know how to make them links if I take away the text in the html. Do I need to make a separate navigation div for each image?

Sorry I'm so bad at this.

Andrea · April 14, 2014

I need to see what you're working on. Can you please post the link to your page? I checked here http://2ndcycle.com/zeitgeist/ - but I don't see anything overlapping.

Kadigan · April 14, 2014

I re-uploaded the files to the same address, it should work now.

Andrea · April 14, 2014

You're applying all the images to every li - that won't work. If you want to use the background images, you'll have to apply a different class or ID to each li, and then only assign one image to each. However, if your button has a text graphic and you add real text on top of it, you'll still see double, unless you get the real text to totally match the image text.

Kadigan · April 16, 2014

Yay, it worked! Only now I have to have text on top of the image, or the image disappears... :/ It also appears to be cutting off the bottom of the image, which can be seen when hovering over an image.

Andrea · April 17, 2014

Not sure if this works without trying it out, but see if applying a height and width to the li will do it.

Kadigan · April 17, 2014

As far as I can tell, that doesn't work.

Andrea · April 18, 2014

I've looked at it but cannot figure it out, but I've alerted the other mods to this issue. Surely one of them will come along shortly and offer a solution.

I'm definitely interested in finding out why this background image isn't working. But as I've mentioned before, using an image-based navigation is not the best way to go about that.

Sign In

Background Image Not Displaying Properly

Recommended Posts

Kadigan

Andrea

Kadigan

falkencreative

Kadigan

Andrea

Kadigan

Andrea

Kadigan

Andrea

Andrea

Kadigan

Andrea

Andrea

Kadigan

Andrea

Andrea

Kadigan

Andrea

Andrea

Kadigan

Andrea

Kadigan

Andrea

Kadigan

Andrea

Kadigan

Andrea

Kadigan

Andrea

Join the conversation

Browse

Activity

Store

Support