Making background mobile friendly

• 

  scottmeager · Member · Sep 11, 2021 at 12:00 am

  • Copy link
  • Add topic to favorites

  How do I make my website background mobile friendly? On PC I have it pinned as a single image which is what I want. However when I view the website on mobile phone it does not appear pinned and instead repeats the image 3-4 time which messes up the formatting.

  The blog I need help with is: (visible only to logged in users)

• 

  marklchaves · Member · Sep 11, 2021 at 2:10 am

  • Copy link

  Hello,

  Have you tried setting your background image Repeat option to None?

  You can find that under Appearance > Customize > Colors & Backgrounds > Background > Options.

  Shout if you have any questions.

  Cheers! :-)

  Mark

• 

  scottmeager · Member · Sep 11, 2021 at 2:57 am

  • Copy link

  Thanks for the tip! Following your instructions it now shows just one picture of the background image on my phone. However it’s not pinned like on PC , not sure if you know what I can do there?

• 

  scottmeager · Member · Sep 13, 2021 at 6:24 am

  • Copy link

  Hi, I found a way to do this through researching on google, thanks for your support!

• 

  marklchaves · Member · Sep 14, 2021 at 12:49 pm

  • Copy link

  Hi @priyanka101,

  Wonderful.

  Just a courtesy to the community, would you mind sharing your solution?

  Cheers!

  Mark

• 

  scottmeager · Member · Sep 14, 2021 at 10:15 pm

  • Copy link

  Sure, I copied the below CSS into the ‘additional CSS’ section:

  body:before {
  content: “”;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(‘https://p8gupta.files.wordpress.com/2021/09/edited-background-2-e1631485085840.jpg’) no-repeat right center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }