Responsive background image for mobile

  • Hi there!

    I’ve just created this website but it doesn’t look so fantastic on mobile due to the background image -although I think it’s great on desktop.

    https://www.spinningpath.com

    Would it be possible to use CSS to have it responsive, or have some CSS to make it fit the screen better on mobile?

    Thank you in advance!

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @jessicaholroyd,

    You can control that with CSS media queries. Add the following CSS code into the Additional CSS field in the Customizer:

    @media screen and (max-width: 960px) {
  body.page-id-339 {
    background-position: 20% center;
  } 
}

    Feel free to adjust the values. For example, you can change the breakpoint (960px) to any value that you want. This means that the CSS will be applied on screens smaller than 960px. For phones only you’d probably want to use something smaller.

    You can find more info about background-position values here.

    Additionally, you can also add background-size. More info here.

    Thanks!

    Thread Starter jessicaholroyd

    (@jessicaholroyd)

    Hi there, thanks so much for your reply but unfortunately that didn’t work ?? I tried different values…eek!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Responsive background image for mobile’ is closed to new replies.