Banner,Header,image cropping–how do I change the behavior?

• 

  misterbluto · Member · Dec 16, 2016 at 7:01 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  The banner image for my website parentaldiscipline.com crops from both sides and remains centered as the browser window shrinks. I would like the banner image to either anchor on the left and have it crop in from the right, or shrink to fit the size of the browser window. Either way, the site title would then be visible regardless of window size.

  Thanks for your help!

  -William

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

• 

  thesacredpath · Member · Dec 19, 2016 at 5:44 pm

  • Copy link

  Hi William, making the image adjust in size is pretty difficult, and on phones, your site title and tagline at top left of the image would be nearly unreadable. We can however make it crop from the right and keep the title and tagline visible. I’ve resized things on screens 520px and narrower so the full title/tagline is visible. Give this a try and see what you think.

  .site-header .site-branding {
    background-position: left 0;
  }
  @media screen and (max-width: 520px) {
    .site-header .site-branding {
      background-size: cover;
      height: 165px;
    }
  }

• 

  misterbluto · Member · Dec 19, 2016 at 9:12 pm

  • Copy link

  That’s just what I was hoping to do, thank you for your help :)

• 

  thesacredpath · Member · Dec 20, 2016 at 5:28 am

  • Copy link

  Hooray and you are welcome!