Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1236695

    Hi there,
    our customer wants to have a fill background image at the back of the body. Something like this: http://naturkosmetik-studio.at
    How can I achieve this? I scrolled through some of the solutions here in the forum with plugins or CSS, but none of them will work ;(
    It is told to insert an image at the body background section at General Layout, but I only find here the options for Body Color but not for Body Image.
    I am sure, I will slap my head, when you provide the solution, but I really can’t find it …

    #1236735

    First of all – what kind of layout do you have choosen on Enfold: General Layout : a stretched or a boxed or at the end a fixed frame layout?
    If you have a boxed layout f.e. – you will have then on General Styling a “Body Background” Option

    But this is only one part of your example page.
    If you like to have a full transparent content – like on your example page there had to be a lot of css settings to be made.

    best would be if you start with that boxed layout – it is possible to have this with a fixed frame.
    It is hard to have this with a slideshow in the background..
    That was my old attempt to reach this – but the slideshow timing will not be synchronized the more time passes:
    https://webers-testseite.de/goldfinger/
    ( These are two identical slideshows that runs on theory synchronized – the one on top shows only a narrow strip and has a high z-index – the other has a low z-index)
    But that is not necessary for your solution with a static background-image.
    It will be best to help you if we can see the page it concerns.
    it is easy to have a body background-image via quick css f.e. and even to have more than one background-image on the same container:
    you see on that page how it is done for a 1/1 container with three background-images and different settings :
    https://webers-testseite.de/multiple-background-images/

    in other words it is possible to have this http://naturkosmetik-studio.at/Images/IMG_background.png as one background pattern that is set to repeat or not to scroll away – and those leaves too but with no repeat.

    #1236738

    See here an example page: https://webers-testseite.de/transparenzen/

    and the css code for it:

    #top.page-id-38479 {
      background-image: 
        url(https://webers-testseite.de/wp-content/uploads/IMG_background_treatments.png), 
        url(https://webers-testseite.de/wp-content/uploads/IMG_bg.jpg);
      background-repeat: no-repeat, repeat;
      background-position: top left, center center;
      background-color: transparent !important;
      background-attachment: scroll
    }
    
    #top.page-id-38479 #main {
      background-color: rgba(255,255,255,0.2) !important;
    }
    
    #top.page-id-38479 .main_color {
      background-color: transparent !important;
    }
    
    .html_stretched #top.page-id-38479  #wrap_all {
      background-color: transparent !important;
    }
    #1236740

    for background-attachment : fixed
    there is a better way to have it – because on IOS Devices – this looks strange – on scrolling it flickers
    ( google on that background-attachment : fixed and Safari Browsers )

    there is a little trick to have that: the background-image that should have background-attachment : fixed goes to the pseudo container :before –
    and that container is set to position fixed!
    So the code above will look like this ( for my page-id ) :

    #top.page-id-38479 {
      background-image: url(https://webers-testseite.de/wp-content/uploads/IMG_bg.jpg);
      background-repeat: repeat;
      background-position: center center;
      background-attachment: scroll;
    }
    
    #top:before {
      background-image: url(https://webers-testseite.de/wp-content/uploads/IMG_background_treatments.png);
      background-repeat: repeat-y;
      background-position: left top;
      content: "";
      position: fixed;
      width: 100%;
      height: 100%;
      -webkit-clip-path: inset(0 0 0 0);
              clip-path: inset(0 0 0 0);
    }
    
    #top.page-id-38479 #main {
      background-color: rgba(255,255,255,0.2) !important;
    }
    
    #top.page-id-38479 .main_color {
      background-color: transparent !important;
    }
    
    .html_stretched #top.page-id-38479  #wrap_all {
      background-color: transparent !important;
    }

    with the fixed image on repeat-y now

    #1236883

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    #1236897

    Oh, wow, gentlemen. I am truly impressed and very sorry that I obviously was unclear in my description. I am happy with a fixed image in the background (appears magically when you choose boxed layout [»eingerahmtes Layout«]. And yes I am going to slap my head now).

    I also tried the »scrolling solution with 2 images and CSS« (although the background isn’t very large in our example), but it didn’t work for me. But I am very happy with the fixed background solution. I am VERY sorry, if you had a lot of work generating the CSS codes.
    Anyway, many many thanks for your time and high quality answers.

    German: Vielen Dank, Günni, für deine großartige Antwort, aber ich habs gar nicht so genau gebraucht. »Eingerahmtes Layout« war der Schlüssel für mich, da hier dann ein Background ladbar ist. Sorry, dass ich bei der Beschreibung nicht klar genug war.

    Vielen, vielen Dank nochmal.

    #1237078

    Hi Renko,

    Glad you got it working for you with Guenni007’s help! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.