Theme Profile: Header fits not on every screen

• 

  lifemeetsbeauty · Member · Feb 16, 2015 at 6:46 pm

  • Copy link
  • Add topic to favorites

  I’m using a header in theme Profile. I thought it looks good, but when I use a different computer with a bigger screen I miss a piece of the bottom of the header. I want the header automatically adapts to any screen. Can I do something with CSS? And what can I do?

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

• 

  designsimply · Member · Feb 17, 2015 at 1:17 am

  • Copy link

  The theme is using a CSS3 rule to add the background image:

  background-size: cover;

  What that means is the image will be expanded to cover the whole container area of the parent element.

  There is another value you can use for background-size which is “contain” and that one means that the image will be scaled to as large as possible without exceeding the container width.

  The benefit of each of these is the image adjusts in different ways to fit the area depending on the browser width (a good thing for responsive design). The problem is that one each can result in clipping the image in different ways. Try testing this example page at different browser widths to see how they compare:
  http://davidwalsh.name/demo/background-size.html

  This example will switch from cover to contain:

  #header {
  	background-size: contain;
  }

  But it doesn’t look very good on mobile, but you can add a media query later if you decided to take that route.

  The background-size property can get complicated. :)

  What you might want to do instead is limit the change to larger sized screens (i.e. let the theme do what it wants with the mobile view) and then get rid of the background-size stuff and set the background image to a fixed height (looks like you want to use 300px) and override the header image that way. Here is an example I worked on that will do it:

  @media screen and (min-width: 570px) {
  	#header {
  		background: url(https://lifemeetsbeauty.files.wordpress.com/2015/02/sample.jpg?h=300) center !important;
  		background-size: inherit;
  		-webkit-background-size: inherit;
  		-moz-background-size: inherit;
  		-o-background-size: inherit;
  		min-height: 300px;
  	}
  	#navigation {
  		background: transparent
  	}
  }

  The @media query limits the change to browser widths larger than 570px wide. See http://en.support.wordpress.com/custom-design/custom-css-media-queries/

  The “background” rule overrides the other background settings in the dashboard, so if you use this method you need to remember to update the image here and not in the other settings if you want to change it later. Notice that I added “?h=300” to the end of the image—that forces it to 300 pixels tall and that is needed for this example to work.

• 

  lifemeetsbeauty · Member · Feb 17, 2015 at 8:37 am

  • Copy link

  Thank you! I used your last CSS code and I think it works. On every screen the cover fits. What I also see is that the cover is to small. So it repeats on both sides. Do you think I need a new cover with new dimensions if I want only the whole cover?

• 

  designsimply · Member · Feb 17, 2015 at 6:27 pm

  • Copy link

  I think it’s fine to let it repeat. People aren’t likely to have that large of a screen that it would be a problem.

• 

  lifemeetsbeauty · Member · Feb 17, 2015 at 6:37 pm

  • Copy link

  Oke, I’ll keep it like this. Thanks for your tip!