Need help? Check out our Support site, then


Automatically Resizing Page Image

  1. What I did here is use my own image for the page background so that I can have my organization's header as the header for the page (above the image header of the Twenty Eleven theme). Through my basic CSS customization I've achieved the look that I want.

    With one exception... The page background image that I am using is static and doesn't resize automatically to fit the width of the window like the header image does.

    I've tried a bunch different CSS code to accomplish this and this is what I'm using at the moment (to no avail):

    #page {<br /> background:url('http://beaconofhopeblog.files.wordpress.com/2012/10/blog-banner.png') no-repeat, #FFFFFF;<br /> width:auto;<br /> }

    Some stuff I've read is telling me that this kind of customization would only be possible if I self-hosted the blog.. SAY IT AIN'T SO! I'm new to all of this and wouldn't want the extra responsibility (and headache) of self-hosting when all I want is such a simple tweak.

    Any help is MUCH appreciated!

    The blog I need help with is blog.beaconofhope.org.

  2. Try replacing the the CSS for #page you listed above with the following:

    #branding {
    	background: #032341 url('http://beaconofhopeblog.files.wordpress.com/2012/10/blog-banner.png') no-repeat;
    	background-size: contain;
    }
    
    @media (max-width: 800px) {
    	#branding hgroup {
    		height: 120px;
    	}
    }
    
    @media (max-width: 650px) {›
    	#branding hgroup {
    		height: 90px;
    	}
    }
    
    @media (max-width: 480px) {
    	#branding hgroup {
    		height: 60px;
    	}
    	#branding #s {
    		display: none;
    	}
    }

    Note that the background-size rule is CSS3 and so it is not supported in older browsers.

  3. Thank you so much for your help! You really spared some extra work and headaches

  4. Yay!

Topic Closed

This topic has been closed to new replies.

About this Topic