header static

• 

  warneyswhip · Member · Mar 19, 2018 at 10:06 am

  • Copy link
  • Add topic to favorites

  HI can I make the header static so that it doens’t stretch the photo on larger screens?

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

• 

  ravichahar · Member · Mar 19, 2018 at 11:47 am

  • Copy link

  Hey warneyswhip,

  Right now, the header image size is set to “cover” which means it will fit the container whenever you use the different screen sizes.

  You can change its size by adding a small CSS code.

  header.masthead{
  background-size: auto;
  }

  This will display the image to its original size.

  To have more options, please search a little about CSS for background image size.

  Hope this helps.

• 

  warneyswhip · Member · Mar 19, 2018 at 2:13 pm

  • Copy link

  ok thanks, lastly to keep the title in the centre, when I make the font bigger it goes to the left?

• 

  warneyswhip · Member · Mar 19, 2018 at 2:28 pm

  • Copy link

  and why does the header change the colour of hte orginal image? can I stop that?

  thanks again sorry

• 

  ravichahar · Member · Mar 19, 2018 at 2:56 pm

  • Copy link

  I have tried changing the font-size of the title and everything looks fine.

  Please try this code.

  .home.traveler_header_height_3 h1.logo, .traveler_header_height_3 h1.logo, .home.traveler_header_height_1 h1.logo{
  font-size: 5em;
  }

  You can adjust the size according to your requirements.

  The title is already in the center.

  Ther header image seems the same as before. Only the size gets adjusted according to the page, the color of the header image remains the same.

• 

  thesacredpath · Member · Mar 20, 2018 at 1:14 am

  • Copy link

  For the title centering, the theme sets a width of 35% for the title, which is narrower than the title itself, so the following does two things. It sets the width for the title section to 100%, which allows the title to properly center, and the other thing it does (second CSS rule) is to set a special width for the title on screens/windows narrower than 600px so that the entire title is visible on smaller screens.

  For the header color, can you explain a bit more what you are meaning by that? Are you talking about when you hover over your site title and it gets more transparent, or something else?

• 

  warneyswhip · Member · Mar 20, 2018 at 2:40 pm

  • Copy link

  yes that’s what I want, I want to set it so the title adjusts to smaller screens but the picture doesn’t stretch…at the moment when I put it on the phone and scroll to the side it has half a balck screen and the rest of hte title

• 

  warneyswhip · Member · Mar 20, 2018 at 2:41 pm

  • Copy link

  no the header colour i used a graphic image and the colour comes up lighter when uploaded onto the page

• 

  thesacredpath · Member · Mar 20, 2018 at 9:45 pm

  • Copy link

  Hi, here is the CSS that I forgot to include in my previous reply for the site title.

  header.masthead h1.logo.site-title {
    width: 100%;
  }
  @media screen and (max-width: 600px) {
    header.masthead h1.logo a {
      font-size: 50px;
    }
  }

  I opened your header image in a separate window and then compared it to the one on your site in Firefox, Chrome and Safari on my Mac, and I can’t see a difference in the colors. There isn’t any CSS that is making the image lighter. In what browser are you seeing a difference?

  I would probably suggest, since that is a graphic image, that you save it as a png image and then upload that one and set it as your header image. JPG is really better suited for photographic images and PNG works better for graphic type images such as yours. You might want to try that and see if that gets things looking better.