Redesigning Header Image to span width of browser

I'm using the twentytwelve theme as my base with a child theme.  I would like my header navigation and image  to span the width of the browser window no matter the size

Here is an example of what I'm trying to do.

http://www.caleafygreens.ca.gov/
deitercat2Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

meb_santosoCommented:
CSS:
#headerimg { width: 100%; height: auto; }

HTML:
<div id="header">
<img src="somestrechtedphoto.jpg" id="headerimg">
</div>

...or use classes if there are many images
...or use fixed height if it's applicable
...or use it as a background
...or center position the image
0
deitercat2Author Commented:
I noticed the twentythirteen theme has the style of header I'm looking for, but it seems very blog centric.  Since I'm building this more as a website with many pages rather than a blog, I want the content area to have the twentytwelve theme.  Is it possible to use the header styling from twenty-thirteen only. Does that work?  If so, what is the best way to do that?
0
meb_santosoCommented:
Can you be more specific with what / which part that you refer with 'header styling'? The image? the font? the placement?

The theme is actually pretty straight forward: some HTML, and some corresponding CSS properties. If you can fish out which part of the header that you would like to use (i.e. the exact divs / class / ids), then you're good to go.
0
Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

deitercat2Author Commented:
"...If you can fish out which part of the header that you would like to use (i.e. the exact divs / class / ids), ..."

I know and that's my biggest struggle, I'm still a bit of a novice with CSS.  It's the header image that I want, but I would like to keep the styling for the nav menu .  I think I can get a handle on this once I better understand how wordpress functionality works.
0
meb_santosoCommented:
the answer to your question is in my first comment; as for understanding wordpress, I would suggest you to first learn CSS and HTML, that's the basic. Wordpress comes afterwards.

source: personal experience
0
eemitCommented:
Copy this to your Child Theme Style.css:

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
	body .site {
		margin: 0;
		max-width: 100%;
	}
	footer[role="contentinfo"] {
		max-width: 100%;
	}
}

Open in new window

0
eemitCommented:
If you need no margin for header image at all then set .site padding to 0, but then you need to adjust left margin of elements like navigation menu, title, footer e.g:

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
	body .site {
		margin: 0;
		max-width: 100%;
		padding: 0;
	}
	footer[role="contentinfo"] {
		max-width: 100%;
	}

	.main-navigation,
	.site-header h1,
	.site-header h2,
	.site-content,
	footer[role="contentinfo"] {
		margin-left: 24px;
		margin-left: 1.714285714rem;
		margin-right: 24px;
		margin-right: 1.714285714rem;
	}
}

Open in new window


TwentyTwelve child theme - Screenshot
Note: for Internet Explorer 8 you need all this also in an ie.css in your Child Theme.
Add this to your Child Theme Style.css:
@import url("../../twentytwelve/css/ie.css");
And create an empty ie.css in a folder "css" of your Child Theme.
Put the following to this ie.css:
/* Minimum width of 960 pixels. */
/*@media screen and (min-width: 960px) {*/
.ie body .site {
		margin: 0;
		max-width: 100%;
		padding: 0;
	}
.ie footer[role="contentinfo"] {
		max-width: 100%;
	}
	
.ie .main-navigation,
.ie .site-header h1,
.ie .site-header h2,
.ie .site-content,
.ie footer[role="contentinfo"] {
		margin-left: 24px;
		margin-left: 1.714285714rem;
		margin-right: 24px;
		margin-right: 1.714285714rem;
	}
	
/*}*/

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
deitercat2Author Commented:
Thank you very much for your thorough solution.  Much appreciated!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.