WordPress.com Forums » Topic: Automatically Resizing Page Image

designsimply on "Automatically Resizing Page Image"

designsimply — Mon, 15 Oct 2012 14:54:24 +0000

Yay!

jhgonzalez7 on "Automatically Resizing Page Image"

jhgonzalez7 — Mon, 15 Oct 2012 14:49:03 +0000

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

designsimply on "Automatically Resizing Page Image"

designsimply — Sat, 13 Oct 2012 22:37:32 +0000

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 on "Automatically Resizing Page Image"

jhgonzalez7 — Fri, 12 Oct 2012 00:45:03 +0000

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!