WordPress.com

1. jhgonzalez7
   Member
   Oct 12, 2012, 12:45 AM

   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. designsimply
   Staff
   Oct 13, 2012, 10:37 PM

   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. jhgonzalez7
   Member
   Oct 15, 2012, 2:49 PM

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

4. designsimply
   Staff
   Oct 15, 2012, 2:54 PM

   Yay!

Topic Closed

This topic has been closed to new replies.