• Skip to primary navigation
  • Skip to footer navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WP Fangirl

WordPress Consultant Sallie Goetsch

  • speakerdeck icon
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact

How to Fit Your Screen Size to Your Background Image (Instead of the Other Way Around)

May 2, 2015 by Sallie Goetsch 1 Comment

It seems like such a simple request: “I need the whole image to show in the background.”

In this case, it wasn’t just for aesthetic reasons: the client had licensed that image under terms that said it had to be used as-is, without cropping or alterations. It was a large image, 1600 pixels wide by 2200 pixels tall.

The width was not really the issue in this case: it was the height. While this site has some long pages, the home page and many others are a lot less than 2200 pixels tall, even when the browser is set to 1600 pixels wide.

Normally, when you want a responsive background image, you use either background-size: cover or background-size: contain.

Neither worked in this case. With background-size: cover, the image filled the width of the screen at any size, but the bottom was cut off.

With background-size: contain, on the other hand, the image would be too narrow to show up on pages without much content—of which there were many in the early stages of building the site. Plus, the size of the image would vary with the amount of content on the page—awkward. And you have to have a much bigger screen than mine to set your browser height at 2200 pixels.

CSS for background images is designed to fit the background to the container. What I needed to do was fit the container to the background image.

After various unsuccessful experiments, I concluded that I couldn’t do what I needed to do with a background image. What I had to do was create a <div> and put the image inside it. Then the image would resize automatically the way images within the content do.

Since I’m working with Genesis, I couldn’t just go in and add a few lines of HTML to my template file. I had to create the new <div> by adding some code to functions.php:

//* Add the background wrapper */
function open_body_background_wrap() {
    echo '<div id="img-background" class="wrap">';
    echo '<img class="body-background" src="'. get_bloginfo( 'stylesheet_directory' ) .'/images/site-background.jpg" />';
}

add_action('genesis_before', 'open_body_background_wrap',1);

function close_body_background_wrap() {
    echo '</div><!-- end .wrap -->';
}
add_action('genesis_after', 'close_body_background_wrap',15);

That results in the following HTML output:

<body class="custom-background">
	<div id="img-background" class="wrap">
	<img class="body-background" src="/images/site-background.jpg" />
		<div class="before-header" class="widget-area"></div>
		<div class="site-container">

	... (The rest of the site content)
	
		</div> //site-container
	</div> //wrap
</body>

That added the image and scaled it properly, but there was one small problem: all of the site content was rendered below the image rather than in front of it.

My initial solution to positioning the content (which only required positioning the first element, div.before-header) was to use a negative margin on said div. That worked fine for the desktop, but it played merry hell with media queries.

I realized that there had to be a better solution than trying to calculate all of the possible negative margins at different screen sizes.

I looked at jquery.background-fit, which seemed like a promising way to go back to using a real background image, but was still trying to fit the image to the screen rather than the other way around.

Returning to my original solution, I looked at jquery-ui.position. I could see that trying to work, but the div just bounced off the image and ended up back underneath it.

The solution turned out to be pure CSS, and actually very simple:

img.body-background {
  position: absolute;
  top:0px;
  z-index:-1;
}

.before-header {
  position:relative;
  top:30px;
  z-index:+2;
}

No, really: that’s it.

Here is a mockup of the result. (The site isn’t live yet so I don’t want to use a screenshot.)

illustration showing the positioning of elements

Now if you’re ever in the position of needing to fit your screen size to your background image, you’ll know what to do. And you’ll also know the answer to the question “When is a background image not a background image?”

Related Items

  • screenshot: Shimmer Theme demo page
    Adding a CSS Background to the Shimmer Child Theme for Genesis
  • How to Configure Your WordPress Site for Mobile Devices (in One Minute)
  • backup in progress
    WordPress Database Backup

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on Email

Filed Under: Using WordPress Tagged With: CSS, Tutorial

Reader Interactions

Comments

  1. David says

    June 1, 2016 at 7:57 pm

    This just helped me on the site I’m building, thanks

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

What I Write About

  • Book Reviews
  • Content Strategy
  • Design
  • Hosting and Servers
  • Most Valuable Plugins
  • There's a Plugin for That
  • Using WordPress
  • Widgets
  • WordPress Consulting
  • WordPress Events

Series

  • Interviews (5)
  • Checking Up on Your Website (4)
  • Client from Hell (5)
  • WordCamps (17)
  • WP-Tonic Roundtable (30)
  • Modern Tribe Tutorials (13)

Follow Sallie on Twitter

    Sorry, no Tweets were found.

RSS Latest News from the East Bay WordPress Meetup

  • Does It Work? Using The New CSS Layout with Rachel Andrew
    Things change rapidly in the WordPress world. The content in this post is more than a year old and may no longer represent best practices.Description Over the past two years, […] The post Does It Work? Using The New CSS Layout with Rachel Andrew appeared first on East Bay WordPress Meetup.
  • Speaker Training
    Get the workbook and slides for the October 2019 speaker training, plus background and pro tips. The post Speaker Training appeared first on East Bay WordPress Meetup.
  • SEO Audit Template & Resources
    Our November speaker, John Locke, graciously provided a template for an SEO audit report. You can download it as a Microsoft Word or PDF document. The post SEO Audit Template & Resources appeared first on East Bay WordPress Meetup.

Footer

Contact Info

2063 Main St #133 · Oakley, CA 94561

+1 (510) 969-9947

author-izer

sallie [at] wpfangirl [dot] com

Location

Map of East Contra Costa County

I live in Oakley, CA and run a WordPress Meetup in Oakland, CA. Don't confuse them!

Subscribe for New Posts

  • Since I blog on an unpredictable schedule, you might want to subscribe by email. I'll also send out occasional announcements about events.

  • Privacy Policy: I will never sell or rent your contact information.

  • This field is for validation purposes and should be left unchanged.
  • Contact
  • Colophon
  • Comment Policy
  • Privacy Policy
  • Five for the Future

Copyright © 2023 · Utility Pro on Genesis Framework · WordPress · Log in

MENU
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact