Automatically Resizing Page Image

  • Author
    Posts
  • #1039457

    jhgonzalez7
    Member

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

    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.

    #1039631

    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.

    #1039652

    jhgonzalez7
    Member

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

    #1039653

    Yay!

The topic ‘Automatically Resizing Page Image’ is closed to new replies.