Search code examples
cssresponsiveness

Responsive background image in twenty fifteen issue

I'm trying to make my background image responsive in the twenty fifteen theme, especially for mobile i.e. 360px by 640px. I've tried tons of CSS, but no dice. The div is body.custom-background I believe.

Here is the test site: test.justinhawleydesign.com

Thanks

Justin

Solution

  • You'll need max-width: 100% and position your background center center fixed.

    It works best to put this on the html element as it's more reliably the full height of the browser. That said, body seems to be working fine for you here when I revised in the inspector. 

    body.custom-background {
  background: url('http://test.justinhawleydesign.com/wp-content/uploads/2015/09/camera-green22.png') no-repeat center center fixed;
  max-width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}