Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Row Image Background: no cropping

    General Discussion
    2
    5
    125
    Loading More Posts
    • 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.
    • I
      Ilina Catana last edited by

      Dear @mariusjopen,

      on the home page of my site I use a fullscreen image (Row image Background + Cover option).

      This image begins with a red semi-circle.
      When my window is a certain width, the beginning of the image is cut off and this first red half-dot disappears.
      My question: is it possible to force the image to always start at the top of my window?

      That's what I tried to code:

      html.objectfit.background-image img {
      object-fit: unset!important;
      width: 100%!important;
      height: auto!important;
      position: absolute!important;
      left: 0!important;
      top: 0!important;
      }

      With this code, the image starts at the top of my browser regardless of the size of my window.
      Unfortunately under the picture is a large white banner (see picture below).
      I tried to remove this space by changing the "height" setting but unfortunately it doesn't work.

      Website url: https://seedbiosciences.com

      Can you please help me?

      Thanks in advance!

      Ilina
      0_1570103437689_Home_Exemple.png

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Dear @Ilina-Catana
        you could try

        .background-image img {
        object-fit: cover !important;
        width: 100vw !important;
        height: 100vh !important;
        position: absolute !important;
        left: 0px !important;
        top: 0px !important;
        }
        

        Hope it works!

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • I
          Ilina Catana last edited by

          Dear @mariusjopen,

          thanks a lot for your answer and your time!

          I tried it. The page is now online: https://seedbiosciences.com/

          When I reduce the size of my browser window, the image continues to be cropped.
          As if it were centered and the window cut the top and bottom of the image when the size of the window is reduced.
          Do you have any idea where this came from?

          0_1572626482139_Window_Fullscreen.png
          0_1572626492125_Window_Smaller_Height.png

          Thanks a lot for your help!

          Best!

          Ilina

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Dear @Ilina-Catana
            probably with CUSTOM CSS you could overwrite this.

            The image background function is not developed for this exact case.

            Best!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • I
              Ilina Catana last edited by

              Dear @mariusjopen,

              Alright, I'll keep trying :)

              Thank you!

              Ilina

              1 Reply Last reply Reply Quote 0
              • First post
                Last post
              Post a link to where the problem is
              I don't answer or check forum DMs, please just post on the forum.
              Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com

              Before you post:

              Use the Search Feature. Maybe there is already a solution to your issue.

              1. Update Lay Theme and all Lay Theme Addons
              2. Disable all Plugins
              3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
              4. Now see if your problem solved itself
              5. Go here, see if your problem is listed here:
              Troubleshooting

              When you post:
              1. Post a link to where the problem is
              2. If the problem is difficult to explain, post screenshots / link to a video to explain it

              Thanks!

              Online Users

              G
              A
              A

              Recent Topics

              • S

                Changing space above/below gets delete

              • A

                Corruption of website

              • A

                installation/website bearbeiten

              • R

                Slow loading overall

              laytheme.com