Composer Plus Banner Displays Incorrectly

[rumblestix]

Theme: Composer Plus
Site: http://janenashart.com
Banner Image: http://i.imgur.com/ivYpw3w.jpg
Problem: banner image does not scale appropriately and consistently.

I rescaled and cropped the banner image to be 1866 x 836 pixels and 96 dpi using Gimp. Then I uploaded the image to wordpress and selected it via >Customize>Header Image. When the page is saved and refreshed only the top 30% of the image is actually displayed in the banner when in maximized view on a widescreen monitor. I would like the whole image to display.

The image also seems to move down and tile as the banner space is resized with the browser. This is also replicated on http://mobiletest.me/. I would like the full image to display relative to the screen size – without tiling.

Tried rescaling the images but the didn’t work. Any suggestions would be greatly appreciated.
Thank you

[han]

Hi rublestix,
You can increase the banner padding to display the whole image. Go to “Appearance > Customize > CSS” and insert below code

.home .banner,
.banner {
    padding: 330px 0px;
}

Free free to change the padding to fit your image height. If you have to adjust the padding on mobile screen, you add below css to target certain viewport size.

@media only screen and (max-width: 768px) {	
	.home .banner,
	.banner {
	    padding: 100px 0px;
	}
}

[rumblestix]

Hello Han-
That worked – thank you!

Now there is a new problem. The banner image refocuses zooms in or out when the user goes to another page. For example, the banner displays a mountain on the horizon. The sky is 2x larger on the home page vs the other pages. Please advise.
Thank you for your help.

[han]

It appears that they are two different images. You need to remove featured images from pages and only use header image from Customizer (Appearance > Customize > Header Image)

[rumblestix]

You’re awesome Han. There were two images and I was able to correct the issue per your advice.

Hopefully, this is the last question: when a user scrolls – the banner image moves to the left. How can I fix this?

[han]

Try add background position attribute into banner class.

.home .banner,
.banner {
    background-position: 50% 0px;
}

[Damon Valley]

Problem: How can I get my banner image to resize on iPhone/ipad, so it shows full image like on other phones and computer. My site is http://ironbuddhafitness.com.

Thanks in advance.

[han]

Hi Damon,
Go to “Appearance > Customize > CSS” and insert below code that will do the trick

@media only screen and (max-width: 768px) {	
  .home .banner, .banner {
    background-attachment: scroll;
  }
}

You can also adjust the padding attribute if required.

[Damon Valley]

Thanks, Han.

One more thing. How do I stop the scrolling on my home page in mobile. It tiles my image as I scroll down, which doesn’t look right. Is there a code to stop the tiling? Thanks for the quick response.

[han]

Try below code (add background-position into my previous snippet)

@media only screen and (max-width: 768px) {	
  .home .banner, .banner {
    background-attachment: scroll;
    background-position: 50% 0px !important;
  }
}

[Author]

Posts