Jump to content
Sign in to follow this  
compartmentlife

Centering Header Image and adding Footer image

Recommended Posts

compartmentlife

I want to have a header image that is wider than the site in order to "run off" each site of the screen. When I upload an image it is left aligned with the left side of the site. How can I center the image over the site? I also want to create a custom Footer image to mimic the top bar that I create. How do I replace the Footer "color" with a custom image? www.compartmentlife.com

Share this post


Link to post
Share on other sites
bryan-hadaway

You're going about the header image the wrong way. What you want to do is slice the middle section, the part with the logo down to 960px wide and upload that. Then you'll want to make a png version of just the section with the white and stripe, you'll have to add some space to the top to line it up and then run it across the top as a background images: `body{background:url(bg.png) top left repeat-x}` Thanks, Bryan

Share this post


Link to post
Share on other sites
compartmentlife

My problem with doing it that way is that every browser displays the site padding differently and I don't think the bar will line up as designed as a background image.If the "bar" is part of the branding, the menu and content will always start the the right place below. AND, I want to repeat the concept on the Footer, but every page is a different length so I cannot have one fixed background image to accomplish both.

Share this post


Link to post
Share on other sites
bryan-hadaway

I understand your thoughts on this, but there is specific CSS we can use to adjust the code for each browser to line everything up. This is common in web design and is still the best and easiest way to go. If you follow my instructions I can help refine further. Going another route will cause more difficulty and workarounds and you'll have even worse cross-browser compatibility issues. If you need professional hand's on work http://www.pagelines.com/pros/ is coming soon. Thanks, Bryan

Share this post


Link to post
Share on other sites
oryxx

So can we place the code

body{background:url
somewhere and get the banner image appear flush with the top right corner?

Share this post


Link to post
Share on other sites
oryxx

Hi, I am having the same issue and would like to align my logo across the top of every page and have the image align with the body and not with the text. Do I just add the following into my Custom Code? body{background:url(bg.png) top left repeat-x} Thank-you for your help,

Share this post


Link to post
Share on other sites
cmunns

What do you mean have the image align with the body and not the text? Can you provide a link to your site? To get it in the top right corner...it would help to see a link/

Share this post


Link to post
Share on other sites
oryxx

Thank-you, The website I am working on is: http://www.lifechoicesfoods.com/ I am trying to get the top image (the lifechoices+the wave) to align with side grey bar. I'n using the following custom code: .fixed_width #branding .content-pad { padding: 0px 0px 0px 0px; } div.branding_wrap {text-align: center} body{background:url(banneroriginal1.png) top left repeat-x;} .fixed_width #branding .branding_wrap { padding: 0px 0px 0px 0px; background:url(banneroriginal1.png) top left repeat-x; }

Share this post


Link to post
Share on other sites
Kate

@Peter It looks like the image itself is too small to span the entire header. If you increase it to 1000px, it should work. Then add this code in your CSS:

.branding_wrap{width:1000px;margin-left:-10px;}

Share this post


Link to post
Share on other sites
oryxx

Thank-you very much KATE! you rock! that worked just fine. the negative 10 is a great trick.... Very Best!

Share this post


Link to post
Share on other sites
scottj88

Just Used Kate's Code! Twice she has been spot on for me! - Thank you!!

Share this post


Link to post
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

Sign in to follow this  

×