Support/Puro Theme/Help with header background images?

[Resolved] Help with header background images?

Tagged: 

  • Author
    Posts
  • February 15, 2017 at 11:36 pm #5950

    shreddie
    Participant

    A while ago, Andrew helped me with Custom CSS for adding a Header background image. I tried replacing it with a new one, but it doesn’t scale properly. It is currently 1080×216. When the window shrinks, rather than scaling, the image is truncated.

    I need to know what size to create the image, so that it properly fits/scales on the various screen sizes that I need to support (desktop browser, tablets, phones…)

    And is there anything else I need to do to get it to behave responsively?

    Thanks,
    Bruce

    February 16, 2017 at 12:41 am #5952

    Puro Support
    Keymaster

    Hi Bruce, thanks for reaching out. Could we see the problem in action? Do you have a link? You can use the Set as private reply checkbox below to keep things private.

    February 16, 2017 at 12:46 am #5953

    shreddie
    Participant
    This reply has been marked as private.
    February 16, 2017 at 1:07 am #5954

    Puro Support
    Keymaster

    Thanks, please, could you try adding this image as your logo and removing the related Custom CSS, I’ll try adjust from there.

    February 16, 2017 at 1:13 am #5955

    Puro Support
    Keymaster

    Once the background is added to the logo setting, add the following Custom CSS:

    .site-header {
    line-height: 0;
    padding: 0;
}

.site-header .site-branding {
	padding-right: 0;
}

.site-header .site-branding img {
	margin-top: 0;
}

#site-navigation {
	display: none;
}

@media (max-width: 768px) {
	.site-branding {
    	float: none;
	}
}
    February 16, 2017 at 2:33 am #5956

    shreddie
    Participant

    OK, changed. It seems pretty good! Thanks!!

    Bruce

    February 16, 2017 at 2:58 am #5957

    Puro Support
    Keymaster

    Glad that helped. All the best 🙂

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Scroll to top