[Resolved] Help with header background images?

This topic contains 6 replies, has 2 voices, and was last updated by  Puro Support 9 months, 1 week ago.

  • Author
    Posts
  • #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

    • This topic was modified 9 months, 1 week ago by  shreddie.
    #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.

    #5953

    shreddie
    Participant
    This reply has been marked as private.
    #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.

    #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;
    	}
    }
    #5956

    shreddie
    Participant

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

    Bruce

    #5957

    Puro Support
    Keymaster

    Glad that helped. All the best 🙂

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Scroll to top