Help learning how to go about making this background

I better get more specific. I dont know where to code this up other than in the style sheet. I made a 1px x 1280px slice of the red area and tried to repeat that as the body background by replacing the color with background image but I wasnt sure if that was the right thing to do and it wasnt working.

Thanks in advance peeps.

It looks like you’re using the Twenty Eleven theme, so within the Appearance > Background option in the Dashboard, change the background color to #d8d8d8 and save your changes. This will provide the grey area outside the content.

You’ll then need to add “background-color: #F83B4F;” (without the quotes) to the #page id within your themes style.css file. This will provide the reddish background colour to the main content area.

Since you want plain flat colours, there’s no need to use an image, you can simply specify the appropriate html colours as mentioned above.

Thanks Anthony. It may be hard to see but the grey and the red both have textures involved. Would I just need to follow your advice but use background-image … (something or other)?

If you look at the website I currently have the texture set as the background image with a bk color of a red variance. And then I set the body background to none. this would be fine with me except I want that grey on the outsides. And thats where im confused. I tried making the slice and a bk image on the body to preserve the texture and then I was going to change the page bk in the editor to the grey stone. But I cant get the image I sliced to show up in the body background. Hope that made sense.

Ahhh ok. In that case, the eaisest thing to do would be to simply center that background image on the body tag using something similar to this….
background:url(insert/img/url/here.jpg) repeat-x top center

This would work as long as the red section is already wide enough to cover your content area. Also, since the img does have a texture, I’d suggest extending the grey area so it’s a lot wider otherwise it wont fill the screen for people with wide monitors. You’d also need to remove any background color on your #page ID as well.

Thanks Anthony. I went another direction now. All this is learning as I go.

Can you help me figure out how to align the top nav left with the logo and content? Ive been stuck on that and cant figure out how to anchor and full browser the footer. Im about to post a question in the forum on that.

Thanks for the help.

Here

Hi brad,

If you change the ID #access to the following the menu should move across to the left, in line with the logo


#access div {
margin: 0;
}


Thanks Im learning so much.

Since we’re here can you help me with one more thing?

I tried for hours to get the bottom nav to span the width of the browser as well as “stick/anchor” to the browser and never move. I tried a lot of tutorials I found online but doing what they said alone wasnt working and after troubleshooting for a while I had to give up.

Any help would be appreciated. Thanks again.

Ok I got the footer out of the page div but I cant figure out how to keep the footer widgets inside the page. Working on that.

That’s a little bit trickier.

Currently the <footer> is sitting within <div id="page" class="hfeed">. This is restricting it’s width so it needs to be moved outside of this. ie. Just below its closing tag.

Also, you’ll need to add the following styles on to #supplementary

margin: 0 auto;
width: 900px;

You’ll then need to remove the background image from #supplementary and add it to #colophon

background: url("images/redcheck.png") repeat scroll 0 0 transparent;

Cool thank you.

Where can I find “the <footer> is sitting within <div id=”page” class=”hfeed”>.” that you are referring to?

Ahhh sorry. Should’ve mentioned that. That’ll most likely be in the footer.php file.

Before you make all these changes, please make sure you take a backup of all your theme files just in case something goes wrong.

“One more thing” I would like the footer to “stick” to the page and never leave so the main content scrolls below and doesn’t push the footer off page. Is this easy too? Thanks again man.