Automatically Resizing Page Image

• 

  jhgonzalez7 · Member · Oct 12, 2012 at 12:45 am

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  designsimply · Member · Oct 13, 2012 at 10:37 pm

  • Copy link

  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.

• 

  jhgonzalez7 · Member · Oct 15, 2012 at 2:49 pm

  • Copy link

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

• 

  designsimply · Member · Oct 15, 2012 at 2:54 pm

  • Copy link

  Yay!