• 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)
  • try this..

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

    (@fgatlin)

    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

    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.