Search code examples
csswordpresspositionwordpress-theming

Background image positioning on desktop vs. mobile

I'm setting up a new Wordpress site and am stuck on how to position my logo (header image)/background image. The photo below is how I want it to look & how it currently appears on a desktop. However, it gets cut off on mobile and I think it has to do with how I set it up...

enter image description here

My header image is actually transparent and what you see is the background image. So my question is, is there a way that I can position it properly on mobile devices too? Or, is there a better way to do this?

The reason I chose to set it as the background image rather than a header image is that I wasn't sure how I could get it to actually touch the top of the page if set as the header image.

If you want to see my actual website, it's here. I'm using the Brunch Pro theme.

Any help or ideas would be very much appreciated! :)

Solution

  • Add this css to active theme style.css file.

    @media (max-width: 767px){
    body.custom-background {
        background-image: url(http://gleefulthings.com/WPtestblog/wp-content/uploads/2018/06/backgroundlogo2.jpg);
        background-position: 50% top;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 70% auto;
    }
}