background image doesn't scale in mobile

• 

  samilinna · Member · Jun 22, 2016 at 9:25 am

  • Copy link
  • Add topic to favorites

  Hi, I’m pretty happy with my theme overall but mobile version looks funny because the background image doesn’t scale correctly and only small part of the image is visible. I contacted support and they said advanced CSS is needed to fix this. If scaling is not possible, would there be a way to use smaller version of the image for mobile?

  Thank you for your help!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jun 23, 2016 at 5:11 am

  • Copy link

  Hi @samilinna, I can do this, but it is quite messy since the div that the image is in does not scale height wise, it stays the same height. I’m going to discuss this with one of our theme developers to see if they can figure out how to do this in a less messy way. Hopefully I can get back to you on Thursday on this.

• 

  samilinna · Member · Jun 23, 2016 at 6:07 am

  • Copy link

  Great, thank you!

• 

  thesacredpath · Member · Jul 7, 2016 at 10:47 pm

  • Copy link

  Hi there, and sorry this took so long. I got confused and thought your image was a featured image on the page instead of a background image. Add the following and then narrow down your browser window to see what happens to the image at phone sized display width.

  body.custom-background {
      background-size: contain;
  }

  We can move the title and tagline up and over the image, but as you will see, to keep it in the image on phones, it will have to be very small. Let me know your thoughts.

• 

  samilinna · Member · Jul 15, 2016 at 8:35 pm

  • Copy link

  Hi,

  it looks definitely better this way on mobile! Now that I know how this works I might try and edit the picture or find another one that would be more suitable for this. Thank you!

• 

  thesacredpath · Member · Jul 16, 2016 at 3:06 am

  • Copy link

  You are welcome.