Okay
  Public Ticket #3635553
Background
Closed

Comments

  •  1
    MrZigarillo started the conversation

    Hello Laborator-team,
    I have the problem that I have a white border at the top of the screen on the start page passionealfa.de .
    I don't have it on the subpages and the settings are identical to these pages. Is there a trick to get rid of this?
    Or would it be possible to set the background as a fixed background in the theme? Instead of the white background colour. 
    So that I don't have to create it individually on each page.

    Many thanks for your help. 
    Kind regards, Florian 

  • [deleted] replied

    Hi Florian,

    Please add the code below to your Custom CSS area:

    body.home .portfolio-title-vc-content {
        margin-top: 0px !important;
    }

    It will remove the top margin of your Homepagesmile.png

    Have a nice day!

    P.S. If you like our theme, it would help us a lot if you could give us a five-star rating on Themeforest from your Downloads tab.

    A huge thank you from me and Laborator in advance.

  •  1
    MrZigarillo replied

    Thank you very much for your help Ylli!
    That worked great with the CSS code.

    Do I have to insert the image on all pages individually. Or is there also a possibility to say that it should appear everywhere at once. I have tried this code:

    body {
        margin: 0;
        padding: 0;
        background-image: url('https://passionealfa.de/wp-content/uploads/2024/04/Passione-Alfa-Oldtimer-Werkstatt-Restauration-Header-Logo-3.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        background-repeat: no-repeat;
    }
    

    However, I then had a white frame around the portfolio items on this page: https://passionealfa.de/referenzen/ 

    Kind regards, Florian

  •  1,558
    Laborator replied

    Hi Florian,

    Instead of the body add the following CSS to the wrapper, example:

    .wrapper {
        background-image: url('https://passionealfa.de/wp-content/uploads/2024/04/Passione-Alfa-Oldtimer-Werkstatt-Restauration-Header-Logo-3.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        background-repeat: no-repeat;
    }

    Best regards,
    Laborator Team


      Documentation         Join Kalium Users Group

  •  1
    MrZigarillo replied

    Hi Art,

    thank you very much! That works great.

    But it is ignored on mobile. Even if I integrate my own code with a portrait image in the CSS responsive settings, it also changes it on the desktop version.
    Furthermore, the background image scrolls on the mobile version, although everything is "fixed".

    F

    This was the code I used:
    .wrapper {
        background-image: url('https://passionealfa.de/wp-content/uploads/2024/05/Passione-Alfa-Oldtimer-Werkstatt-Restauration-Header-Mobil-Logo.png');
        background-size: cover;
        background-position: center;
        background-attachment: fixed; /* Hintergrund fixieren, damit er beim Scrollen nicht bewegt wird */
        background-repeat: no-repeat;
    }
    

    Once again: thank you so much for your help.

    Kind regards,
    Florian 


    P.s: the five-star-rating is already posted;)


  •  1,558
    Laborator replied

    Hi Florian, 

    I have set the position of background to top, but the reason why the image is scrolling in mobile is that background-attachment is not supported in some mobile browsers, such as Safari:

    https://caniuse.com/background-attachmen

    Best regards,
    Laborator Team


      Documentation         Join Kalium Users Group

  •  1
    MrZigarillo replied

    Thank you so much Art!

    I have integrated a new image which is to be used for portrait screens. Now everything fits.

    Thank you very much for your help!
    Kind regards,
    Florian

  •  1,558
    Laborator replied

    Happy to hear that Florian, have a great week!smile.png

    Best regards,
    Laborator Team


      Documentation         Join Kalium Users Group