Jump to content
Sign in to follow this  
studentkrubb

Header + footer background (wrapping canvas)

Recommended Posts

studentkrubb

Hi, I'm trying to implement backgrounds to my header (or branding) and footer but they don't apply accordingly. I've tried

#branding { background: #fff url('http://media.nysida.studentkrubb.se/2011/03/Header1.png') no-repeat top right;
	 }

and similar codes but the images get reduced within the canvas. This is what I actually strive for: with.jpg Any thoughts? Thanks in advance!

Share this post


Link to post
Share on other sites
Kate

Hi Joakim, You'd have to find a way to make those widths wider, while maintaining the width of that main area of content (between the two divs). Have you tried Firebug?

Share this post


Link to post
Share on other sites
studentkrubb

Hi Kate, I see! This is where I'm at now: h.jpg I figure if I manage to remove the left padding I don't have to adjust the width - my only problem is though - even with firebug - I'm not able to find the selector? Any ideas? Live link: http://nysida.studentkrubb.se/ Thanks!

Share this post


Link to post
Share on other sites
Kate

Hey Joakim, First off: you'll have to make that main dropshadow (the white box with the shadows on the sides) narrower ;)

Share this post


Link to post
Share on other sites
studentkrubb

Haha, excellent... It's corrected! Untitled-111.jpg Now how can I make the img wrap accordingly to the left as well? If I enlarge it it only grows to the right. Which selector would be controlling this? Thanks!

Share this post


Link to post
Share on other sites
cmunns

Just make the body page background transparent ` body #page { background-color: transparent!important; } ` and adjust the image bg you made accordingly to fit within the header bc right now it's too wide anyway

Share this post


Link to post
Share on other sites
studentkrubb

I'm still not able to adjust the bg img accordingly within the header? Do I have to use any css positioning of the img? Thanks!

Share this post


Link to post
Share on other sites
Kate

Hey Joakim, As I'm looking at the image above, it still appears the middle white part is too wide...

Share this post


Link to post
Share on other sites
studentkrubb

Yes but the img above is just a smaller example. If I make it any larger it grows to the right when I in fact want it to wrap the left edge. (Rather positioning the img and making it larger than reducing the canvas width.) How can I solve this specific issue?

Share this post


Link to post
Share on other sites
studentkrubb

I have also tried reducing the canvas width but stand facing the same issue, the header only grows to the right?

Share this post


Link to post
Share on other sites
Kate

Hey Joakim, Two things: First, make sure you close that img tag. Second: once you make it the correct width, you can use a negative left margin on it to pull it over.

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  

×