Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Mobile Background not working

Mobile Background not working

Scheduled Pinned Locked Moved General Discussion
12 Posts 4 Posters 1.1k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    J Offline
    jjk
    wrote on last edited by
    #1

    Hello Armin,

    I cant make the mobile background work, can you check?
    http://www.julianjakobkneer.com/sub-rosa_online-archive

    I used your instruction from a previous thread but it doesn't work, displays really weirdly...

    I got this in my custom mobile css:

    body{
        background-image: url(http://www.julianjakobkneer.com/wp-content/uploads/2017/09/subRosa-Julian-Jakob-Kneer_mobile.jpg);
        background-size: cover;
        background-attachment: fixed;
    }
    

    Thanks for the help!
    X Julian

    1 Reply Last reply
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      Hi @jjk

      1. try to upload your image in a lower filesize.
        It takes way too long until it is loaded.
        Photoshop -> save for web…

      2. You need to add the code also in the Custom CSS for Mobile Version.

      Let me know if that worked for you.

      Best!

      Marius

      www.mariusjopen.world

      J 1 Reply Last reply
      0
      • mariusjopenM mariusjopen

        Hi @jjk

        1. try to upload your image in a lower filesize.
          It takes way too long until it is loaded.
          Photoshop -> save for web…

        2. You need to add the code also in the Custom CSS for Mobile Version.

        Let me know if that worked for you.

        Best!

        Marius

        J Offline
        J Offline
        jjk
        wrote on last edited by
        #3

        @mariusjopen

        thanks for the reply!

        1. the picture is only 322 KB, that cant be too much, can it?

        2. i got it only in my custom css for mobile version.

        did you see how it displayed, it quickly pops up crisp and then blurs and has this grey line on top, + it also scrolls, not fixed...

        x Julian

        1 Reply Last reply
        0
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #4

          Hi @jjk

          Ok, I see . but the loading is pretty slow in the desktop version.

          I think the images gets blurred on mobile (not on the mobile-desktop version, actually only on the phone) because somehow it gets stretched I suppose.

          I cannot really understand yet why and would need to look more into it.

          I can do that but before please tell me why do you not use the regular way of adding a background image via the Gridder?

          Best!

          Marius

          www.mariusjopen.world

          J 1 Reply Last reply
          0
          • mariusjopenM mariusjopen

            Hi @jjk

            Ok, I see . but the loading is pretty slow in the desktop version.

            I think the images gets blurred on mobile (not on the mobile-desktop version, actually only on the phone) because somehow it gets stretched I suppose.

            I cannot really understand yet why and would need to look more into it.

            I can do that but before please tell me why do you not use the regular way of adding a background image via the Gridder?

            Best!

            Marius

            J Offline
            J Offline
            jjk
            wrote on last edited by
            #5

            @mariusjopen

            Yeah I also think it's stretching, don't know...

            The gridder Backroundimage only apply to columns, so it will repeat with gaps where "row gutters" are and would also not be fixed...

            I also tried to embed some html directly in the site, without success.

            I would be very happy if you could look deeper into it, I'm already so much overdue with this timewise and kinda lost.

            X Julian

            1 Reply Last reply
            0
            • arminunruhA Offline
              arminunruhA Offline
              arminunruh
              Global Moderator
              wrote on last edited by
              #6

              Hey m8!

              Why not just use "Customizer" -> "Mobile (Smartphone)" -> "Mobile Background Image"

              J M 2 Replies Last reply
              0
              • arminunruhA arminunruh

                Hey m8!

                Why not just use "Customizer" -> "Mobile (Smartphone)" -> "Mobile Background Image"

                J Offline
                J Offline
                jjk
                wrote on last edited by
                #7

                @arminunruh

                hey armin,

                this is embarassing, hadn't updated and didn't have that option in my old version. works perfectly now.

                Thank you!

                1 Reply Last reply
                0
                • arminunruhA Offline
                  arminunruhA Offline
                  arminunruh
                  Global Moderator
                  wrote on last edited by
                  #8

                  Cool :) Aha

                  1 Reply Last reply
                  0
                  • arminunruhA arminunruh

                    Hey m8!

                    Why not just use "Customizer" -> "Mobile (Smartphone)" -> "Mobile Background Image"

                    M Offline
                    M Offline
                    marcelgross
                    wrote on last edited by
                    #9

                    @arminunruh
                    I tried to put a background-image with your custumizer-option. But it displays very strange. Its only a small part of the original pic and shown as a bar...
                    Have you seen this problem before?

                    0_1550525591960_Bildschirmfoto 2019-02-18 um 22.30.09.png

                    Thx

                    1 Reply Last reply
                    0
                    • mariusjopenM Offline
                      mariusjopenM Offline
                      mariusjopen
                      Global Moderator
                      wrote on last edited by
                      #10

                      Dear @marcelgross
                      can you provide us with a link to your website?

                      Best!

                      Marius

                      www.mariusjopen.world

                      1 Reply Last reply
                      0
                      • M Offline
                        M Offline
                        marcelgross
                        wrote on last edited by
                        #11

                        dear @mariusjopen

                        Here is the link https://podcastlab.marcel-gross.ch/szene/
                        I placed the background now with code

                        /* Hintergrundbild allgemein */
                        body {
                          background-image: url("/wp-content/uploads/2019/01/scan-67_hellblau.jpg");
                          background-repeat: no-repeat;
                          background-attachment: fixed;
                          background-position: center center;
                          background-size: 100% 100%;
                        }
                        
                        @media only screen and (max-height: 900px) {
                          body {
                            background-repeat: repeat;
                            background-position: center top;
                            background-size: 110% 710px;
                          }
                        }
                        

                        This works as a not too beautiful solution, because I would like to have the picture stretched the same way as on the desktop-version... But it doesn't work with background-size 100%

                        1 Reply Last reply
                        0
                        • mariusjopenM Offline
                          mariusjopenM Offline
                          mariusjopen
                          Global Moderator
                          wrote on last edited by
                          #12

                          Dear @jjk
                          have a look here:

                          body {
                              background-size: cover;
                          }
                          

                          Does that help?

                          Best!

                          Marius

                          www.mariusjopen.world

                          1 Reply Last reply
                          0
                          Reply
                          • Reply as topic
                          Log in to reply
                          • Oldest to Newest
                          • Newest to Oldest
                          • Most Votes


                          I also code custom websites or custom Lay features.
                          💿 Email me here: 💿
                          info@laytheme.com

                          Before you post:
                          1. When using a WordPress Cache plugin, disable it or clear your cache.
                          2. Update Lay Theme and all Lay Theme Addons
                          3. Disable all Plugins
                          4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                          This often solves issues you might run into

                          When you post:
                          1. Post a link to where the problem is
                          2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                          3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                          Online Users
                          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                          laytheme.com
                          • Login

                          • Don't have an account? Register

                          • Login or register to search.
                          • First post
                            Last post
                          0
                          • Recent
                          • Tags
                          • Popular
                          • Users
                          • Search