Add a full width header

  • fgatlin

    (@fgatlin)


    13 years, 2 months ago

    Hi All,

    I am in the process of creating a new theme based on twenty-eleven.

    I have a full width logo which is 1000px X 100px.

    I placed the code in the header.php file to accommodate this file, and all seemed well, except when I resized the browser, the image would not resize.

    Currently, I am using the image as a background image via css, and I am having a similar problem, the image no longer hangs over when the browser is resized, it gets cutoff now.

    Is there a way to have a header/logo image that will resize with different resolutions and when the browser window is resized?

    My site is at: http://kuacm.org/marco-test

    the header image is at: http://kuacm.org/marco-test/wp-content/themes/Marco/images/head.png

Viewing 3 replies - 1 through 3 (of 3 total)
  • Marvie Pons

    (@marviepons)

    13 years, 2 months ago

    try this..

    #branding img {
height: auto;
max-width: 100%;
}
    Thread Starter fgatlin

    (@fgatlin)

    13 years, 2 months ago

    Thank you,
    I tried this in both places in the css with #branding img, and neither worked.

    Currently, I have this is my css:

    #branding {
	border-top: 2px solid #bbb;
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
	background-image:url('http://kuacm.org/marco-test/wp-content/themes/Marco/images/head.png');
 max-width: 100%;
    height: 80px;
    width: auto\9; /* ie8 */

}

    and

    #branding img {
	background-image:url('http://kuacm.org/marco-test/wp-content/themes/Marco/images/head.png');
	max-width: 100%;
        height: 80px;
        width: auto\9; /* ie8 */
}

    Each under the /*header */ in the css.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 2 months ago

    First make sure you’re importing the styles from your parent theme (step 3) instead of duplicating them.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Add a full width header’ is closed to new replies.