Header compatibility on Mobile view

• 

  thefoodiestation · Member · Sep 28, 2016 at 1:17 am

  • Copy link
  • Add topic to favorites

  Below is my code and my image header does not show correctly on the mobile mode. Help please.

  .header {
  background-image: url(‘https://c8.staticflickr.com/9/8074/29339403503_6b9c2a8e0d_o.jpg’);
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-bottom: 27%;
  }

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

• 

  thesacredpath · Member · Sep 28, 2016 at 7:50 pm

  • Copy link

  Hi there, you can add the following which will set the image size to keep a 100% height instead of adjusting the image to cover the entire area, but as you will see then you have the black background showing on either side. I tried to sample the color in your image and apply that, but it doesn’t exactly match.

  What I would suggest is to edit your header image in an image editing program and do it as a PNG with a transparent background and then use that image along with the following CSS, which sets things as I described above and changes the background color to something very close to your image.

  .header {
      background-size: auto 100%;
      background-color: #fafafa;
  }