...

View Full Version : Can't get a second background to work



ohyeah
11-11-2011, 05:10 PM
Hi,

This is my first attempt at customizing WordPress and it's not been as "easy" as I've expected.

I've a couple of issues with the css.

I've been trying to add an image to the center, top bare section AND add a second tiled background on top of the 'wood' background. But only as wide and high up as the menu. I've tried a variety of ways, but it always seems to push my content around.

Any suggestions on how I can fix this? I appreciate any direction anyone can give me, thanks.

The website is: kevindavison.ca

Excavator
11-11-2011, 06:11 PM
Hello ohyeah,
that gap between your menu/logo and #content is cause by the 500px height of #header .isi

Try removing that height like this -
#header .isi {
width: 920px;
margin: 15px auto 0px auto;
/*height: 500px;*/
background: url(images/menu.png) no-repeat;
}

Now you can put your background image in the next nested div you have, #nav-container.
Like this -
#nav-container {
height: 140px; /*adjust this height as needed*/
width: 920px;
background: url(path/to/your/img.jpg);
/*top: 0px;
left: 50px;*/
}

ohyeah
11-11-2011, 06:36 PM
Hi Excavator,

Thank you ... I've changed it, but if you'll take another look you'll see my header image is stuck at the top and doesn't wanna budge. I feel as though I'm missing something, but can't seem to nail it. Same thing when I try to place my seconf tiled background, though it just shoves everything around, and when I try to position it, it pushes the menu down as well.

I've a few 'firsts' in this layout.

Thanks again for taking the time to help, I appreciate it!

Excavator
11-11-2011, 07:01 PM
Look what this does for you. Too many changes to bother highlighting in red...

#nav-container {
width: 830px;
height: 450px;
background: url("images/header.png") no-repeat bottom;
margin: 0 auto;
/*
position: relative;
top: 100px;
left: 50px;
*/
}

You don't need positioning so I keep commenting it out.

That example gives #nav-container enough height to hold the background image and ul#nav. Semantically speaking, this img should probably be presented from the markup but, since we've gotten this far...

no-repeat bottom makes the background appear only once and at the bottom of 450px high #nav-container. See CSS backgrounds here. (http://www.w3schools.com/css/css_background.asp)

margin: 0 auto; is just zeroing out the top and bottom margin and centering the element.
To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto

ohyeah
11-11-2011, 07:28 PM
Thank you so much ... one question, any idea why it's pushing my menu links to the right? This has been an issue with these last few things I've been trying to implement.

Sorry, I've still so much to learn I know.

Excavator
11-11-2011, 08:04 PM
Thank you so much ... one question, any idea why it's pushing my menu links to the right? This has been an issue with these last few things I've been trying to implement.

Sorry, I've still so much to learn I know.

.isi is 920px wide and ul#nav fits in that.
By giving #nav-container a width of 830px and centering it, you push ul#nav over.

You can see it better with a background color like this -

#nav-container {
width: 830px;
height: 450px;
background: #f00 url(images/header.png) no-repeat bottom;
margin: 0 auto;}

To fix the issue, try it more like this

#nav-container {
width: 920px;
height: 450px;
background: url(images/header.png) no-repeat bottom;
}

One of the hardest concepts for new coders to grasp seems to be the box model. See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

ohyeah
11-11-2011, 08:13 PM
Thank you so much, reading up on that now ... then onto my tiled background again! I'm thinking it may be the width, etc that could've been messing it now, because my biggest issue was it pushing things around. Thanks again :)

ohyeah
11-11-2011, 10:20 PM
omg, I have no idea what's happened :(



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum