Front Page Background Images not covering on mobile

Homepage Community Forums SquareOne Theme Support Front Page Background Images not covering on mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #19062
    David
    Customer

      My front page background images are not covering the entire section when the site is displayed on a mobile device.

      My site is: neececoncreteconstructionbuild.com

      Please let me know if I need to do something differently to cover the whole area.

      Thanks

      #19074
      Wes
      Moderator

        Try and remove or comment out the background-attachment: scroll on line 2428 in your style.css like this –

        	.front-page-1,
        	.front-page-3,
        	.front-page-5,
        	.front-page-7,
        	.footer-widgets {
        		/*background-attachment: scroll;*/
        		-webkit-background-size: auto;
        		-moz-background-size:    auto;
        		background-size:         auto;
        	}

        Let me know if that helps.

        #19094
        David
        Customer

          Thanks for the response.

          This gets me closer. However, it’s repeating the image rather than scaling it to fill the entire area. Is it possible to fix this?

          Thanks,
          David

          #19102
          Wes
          Moderator

            It looks like this code is missing – background-repeat: no-repeat; Did you remove that from your CSS? If you add that back in on line 1473 in your CSS then it will work again –

            .front-page-1,
            .front-page-3,
            .front-page-5,
            .front-page-7,
            .footer-widgets {
            	/*background-attachment: scroll;*/
            	background-repeat: no-repeat;
            	-webkit-background-size: auto;
            	-moz-background-size:    auto;
            	background-size:         auto;
            }

            Also, I just did some more tests on the Theme Demo’s homepage, and I’m going to make an update which should make the background image cover a bit more when viewed on mobile devices. What I’ll be changing is the background-size: auto to cover instead. You can change this in your css in the responsive section mentioned in my first reply above like this –

            .front-page-1,
            .front-page-3,
            .front-page-5,
            .front-page-7,
            .footer-widgets {
            	/*background-attachment: scroll;*/
            	-webkit-background-size: cover;
            	-moz-background-size:    cover;
            	background-size:         cover;
            }

            If you want me to add these 2 adjustments in your CSS for you just let me know. All I would need is a Temporary login and I can get this added in immediately.

            Just let me know

            #19305
            David
            Customer
              This reply has been marked as private.
              #19353
              Wes
              Moderator

                I just added the customization I mentioned earlier and checked on my iPhone. Looks like everything is working.

                #19365
                David
                Customer

                  You are awesome.

                  Thanks so much. I must have missed a step.

                  #19366
                  Wes
                  Moderator

                    You’re Welcome!

                  Viewing 8 posts - 1 through 8 (of 8 total)
                  • The topic ‘Front Page Background Images not covering on mobile’ is closed to new replies.