Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • #196412


    I’m totally new to the creation of wordpress sites, so please keep that in mind… I would like to achieve an effect where I can have a background texture with the main content floating above, similar to this site: http://ladywellspa.com

    I can’t quite figure out how to create this effect on here. Is there a way to achieve this?


    ~ Sarah


    Hi sarahpeller!

    In WordPress dashboard please go to Enfold theme options > Styling tab and choose Boxed Layout and upload background image http://i.imgur.com/nCF5NQ6.jpg



    Is there any way at all to use the background image with the full width, stretched version of the layout vs the boxed version?



    Can you post a screenshot and show where exactly you would like to add a background image? You can use Color Section element in Layout Elements in Avia Layout Builder or you can set a background image to content

    Best regards,


    sorry dumb question how do I post an image on here?


    Hey, I just saw the link to the site you posted.
    Can the background color of the main manu be semi-transparent in enfold too?



    You can upload your screenshots on imgur.com or on Dropbox and post the links here

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    .main_color { background-color: rgba(255, 250, 250, 0.5); }
    #main { background-color: transparent; }



    Ok got it, of course. I will do it now.


    Here is a sample of the design.


    As you can see I want the background image to fit the width of the page, and to appear behind the main navigation and 6 content modules.
    My ultimate aim is for the background image to be a slideshow.
    Any help you can provide in achieving this would be amazing.




    You can create a Layer Slider with different backgrounds transition. Create a page then insert the Layer Slider element. Below, add a Color Section for the content. Add a unique section id for the color section on “For Developers: Section ID” option, example “awesome-section”. Add this on your custom.css or Quick CSS to move the Color Section on top of the Layer Slider with different background images.

    #awesome-section {
    position: relative;
    top: -300px;
    z-index: 20;
    background: transparent;
    border-top: none;



    Ismael, this may achieve exactly what I need. The only issue with it is that it is leaving big gaps further down the page. Does this mean that every content section on the page needs to have the same top setting of -300px? is that the correct way to do it, and wouldn’t this then leave a big 300px white space at the very bottom??


    I may have found a solution to this. If I use “margintop: -300px:, the extra space on the page goes away. Can you confirm if this is still a correct way to style it??




    If its working for you then it is correct :)

    If you run into any further issues I would recommend having a freelance developer take a look at the issue. That way you can have it fully customized beyond what the theme offers by default.

    Best regards,


    Thanks Devin. I’d love to get a developer on board, but we are building this site very quickly on the fly, and making design decisions and customisation as we go. I’m happy to get my hands dirty, if you are happy to be patient with me : )


    If you have any questions just let us know. But customization support is based on how large our current queue is. Base support doesn’t cover customization like the above but we can go a bit beyond the norm if the current support queue allows for the additional time.

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Background with white page floating above?’ is closed to new replies.