Background Image position on Mobiles

[Robshawguitar]

Hi,

I am using a photograph for background image on my website: www.loveguitar.net

I was initially having problems with the header obscuring the top of my head in the image. I found a solution to this on the forum that involved putting the image in the CSS with a specification to position to the top. This worked for all viewing option apart from mobiles, where the head still starts to become obscured.
Is there a way to alter the positioning to be slightly lower just on mobiles? If not, a way to position the image slightly lower globally - I would rather have a small black line at the top on wide screens than the head covered on mobiles.

Thank you kindly

Rob

[Alaa]

Hi Rob,

I can see you have added this code:

body {
    background-image: url(http://www.loveguitar.net/wp-content/uploads/2018/06/Rob-Shaw-Grey-White-0026-1.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}

in this line: background-position: center top; you can control the background top position, something like background-position: center 40px; sould be fine on my mobile devices, to apply the new code only on mobile devices, you can use this snippet:

@media screen and (max-width: 980px){
    body {
        background-position: center 40px;
    }
}

Thanks

[Robshawguitar]

Hiya,

Thanks a lot for that. I tried the first option and that worked great, but as might be expected meant the pic was too low for the wider screen options.
I’m trying to use the second option to make it specific to mobiles but struggling to get it to work. I’m not sure where to put it in relation to the other codes, above or below, and how it relates to the brackets. Sorry, i’m kinda new to this!

[friech]

Hi There,

Please treat the CSS @media query as a separate block from the first block provided, you can place it at the bottom of your other custom CSS block (either on Theme Options > CSS or Child theme’s style.css)

More details about CSS media query here.

Hope it helps,
Cheers!