Smaller header image size

• 

  sciencebasedstrategies · Member · Apr 3, 2017 at 8:45 pm

  • Copy link
  • Add topic to favorites

  Hi-I’m want to make the Header Image size smaller on my site (default is 2000 × 1200). I’m using the Lodestar template. Does anybody have tips on the proper CSS code to write for this? I’m a very basic coder. I’m thinking I would maybe want it be 900 or 600 tall. Happy to obviously make the entire picture proportionate.
  Thanks for any help you can provide.

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

• 

  thesacredpath · Member · Apr 4, 2017 at 6:06 am

  • Copy link

  Hi there, this is a bit of a challenge. Add the following Custom CSS and then see what you think.

  @media screen and (min-width: 60em) {
  	.custom-header-image {
  		height: calc(50vh - 85px);
  		background-size: 100% auto;
  		background-repeat: no-repeat;
  		background-position-y: top;
  	}
  }

• 

  sciencebasedstrategies · Member · Apr 4, 2017 at 6:41 pm

  • Copy link

  Thanks! That didn’t work, unfortunately. Still too tall.

• 

  thesacredpath · Member · Apr 5, 2017 at 8:41 pm

  • Copy link

  Hi, when I enter the code I have given you via my web inspector, the image gets shorter. Looking at things, I’ve made a few adjustments and added a couple other media queries to compensate for different page widths. Add the following to your custom CSS. This change may not show up in the preview, so save it and then visit your actual site.

  @media screen and (min-width: 60em) {
  	.lodestar-front-page .custom-header-image {
  		height: calc(40vh - 85px);
  		background-size: 100% auto;
  		background-repeat: no-repeat;
  		background-position-y: center;
  	}
  }
  @media screen and (min-width: 30em) {
  	.lodestar-front-page .custom-header-image {
  		padding: 5% !important;
  		background-position-y: 0;
  	}
  }
  @media screen and (max-width: 59.999em) {
  	.lodestar-front-page .custom-header-image {
  		background-position-y: center;
  	}
  }

• 

  sciencebasedstrategies · Member · Apr 5, 2017 at 11:58 pm

  • Copy link

  Thanks! That worked much better, just much smaller (almost too small). Is there a happy medium. I’m just not quite getting the — height: calc(40vh – 85px) part of the code so didn’t want to play with it. I’ve never seen vh(or em) so didn’t want to play.

  Then, I want this to occur each page and it only seemed to adjust the first (front) page. Would there be part of that code that needs to be removed to make it adjust all pages?

  Thank you so much for all your help on this.

• 

  thesacredpath · Member · Apr 6, 2017 at 7:50 am

  • Copy link

  Edit the 40vh in the height declaration. vh stands for vertical height. 40vh would be 40% relative to the vertical height of the viewport. If someone has a big monitor and they have their browser window very tall, the image will be taller than for someone on a laptop with a much shorter screen and browser window. What size to use is sort of a wild guess. The original was 75vh.

• 

  sciencebasedstrategies · Member · Apr 6, 2017 at 12:15 pm

  • Copy link

  Thanks again. I changed it to 50 and it looks great. I am playing with the code a bit more to see if I can get it to work on the other pages and that’s where I can’t get it to work. Do I need to insert and edit code for each page?

  Thank you so much for all your help on this. I am beyond grateful!

• 

  thesacredpath · Member · Apr 6, 2017 at 6:27 pm

  • Copy link

  You are welcome.

  To affect all pages the same, let’s try this instead.

  @media screen and (min-width: 60em) {
  	.custom-header-image {
  		height: calc(40vh - 85px);
  		background-size: 100% auto;
  		background-repeat: no-repeat;
  		background-position-y: center;
  	}
  }
  @media screen and (min-width: 30em) {
  	.custom-header-image {
  		padding: 5% !important;
  		background-position-y: 0;
  	}
  }
  @media screen and (max-width: 59.999em) {
  	.custom-header-image {
  		background-position-y: center;
  	}
  }

  If you wish to adjust each page individually, then you would need to use the unique page id CSS class from the opening body HTML tag on each page. In the case of your About page, the opening body tag looks like this.
  <body class="page-template-default page page-id-52...
  page-id-52 is the unique page CSS class for that page. You would then do this to affect only that page.

  @media screen and (min-width: 60em) {
  	.page-id-52 .custom-header-image {
  		height: calc(40vh - 85px);
  		background-size: 100% auto;
  		background-repeat: no-repeat;
  		background-position-y: center;
  	}
  }
  @media screen and (min-width: 30em) {
  	.page-id-52 .custom-header-image {
  		padding: 5% !important;
  		background-position-y: 0;
  	}
  }
  @media screen and (max-width: 59.999em) {
  	.page-id-52 .custom-header-image {
  		background-position-y: center;
  	}
  }

  Note the period preceding the page id CSS class. That tells the browser this is a CSS class rather than a CSS id.

• 

  sciencebasedstrategies · Member · Apr 6, 2017 at 6:42 pm

  • Copy link

  That totally works!! Now I will just go adjust the cropping on each picture/the size of them so that the whole picture shows up properly. I’m assuming that is done manually, vs. coding?

  Thank you again so much. Coders amaze me.

• 

  thesacredpath · Member · Apr 6, 2017 at 6:50 pm

  • Copy link

  Yeah, start with cropping the image. With full width images on responsive themes, it is typically pretty difficult to get the entire image to show at all screen/window widths, but you should be able to find a sweet spot where it “mostly works”.