Header Image Problems

• 

  briggiee · Member · Jan 20, 2017 at 9:45 pm

  • Copy link
  • Add topic to favorites

  The header image shows perfectly for “computer” and “tablet” but it doesn’t show the whole picture on “phone” view. How can I make it so that in every view it looks perfect and whole?

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

• 

  staff-loquaciousloon · Staff · Jan 23, 2017 at 2:41 pm

  • Copy link

  Hi @briggiee!

  The challenge with background images on websites is that they will often look different on certain screen sizes. The width to height ratio of the header area changes on smaller devices, so a different part of the image becomes available (you can see a similar effect on the Eighties Theme Demo)

  It can be possible, some of the time, to write Media Queries into some Custom CSS (part of a Premium Plan or Business Plan) to work around this a bit – but it’s specific to the site and image in question, and requires a bit of comfort with CSS to get the right dimensions :)

  Barring that, it can also help to select an image that places the important items you don’t want cropped as close to the center as possible – that way only the background gets lost on the edges.