Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1000672

    Hi there,
    I am thinking of creating a new website in which I would like to have a background graphic over the whole website (starting directly below the first slider and goes all the way down to the beginning of the footer). Now I know about the function in the styling that let me include a background picture to the maincontent. However if I chose this option the picture kind of repeats always when I add a color section on the page. Additionally, it deletes all the colors from the color sections. My aim would be to have a long background picture without any “cut-offs” and every second element has a slightly transparent background color.
    Any idea how I could solve that?
    Best,
    maurice

    #1000782

    Hey Raphael,

    You would need a very tall image if you have a lot of content on the page, otherwise it will stretch and won’t look very good if you don’t want it to repeat. Could you post a link to where we can see the results you are getting so far please?

    Best regards,
    Rikard

    #1000828

    Hi Rikard,
    Thanks for your response. I have not yet startet with that so I cannot send you a link :)
    But I tested it on another enfold page I have and there I had the issue. Regarding the long picture, I am aware of this, but this is not the problem since it will just be a white document with some lines and circles on it. and I can make that as long as I want. So the question really is, is it possible to disable the function that the background picture “restart” on every section element? So in the end I have the picture without any break from to to bottom.
    One additional question, is it possible to have diverernt background pictures on different pages?
    Thanks a lot
    m

    #1001065

    Hi,

    Ok, thanks for the feedback. The answer is likely yes to both of your questions, but we would need to be able to see the actual elements in order to give you accurate CSS.

    Best regards,
    Rikard

    #1002255

    Hey Rikard,

    Just created the test page (see private). As you can see I just started but the background pictures are already implement (only visible on wide screens yet / Picture has white background and thin blue/green lines, therefore maybe not visible on first glance). So as you can see in each new color section the picture “restarts”. This should be disabled and the picture should run over the whole page without any break (exept of course the footer would start). It would be even better if, in case of a longer page, the picture would repeat at the bottom of the page.

    Many thanks for your help,
    Best regards,
    Maurice

    #1002961

    Hi,

    There are a few possibilities you can try.

    1. You can have color sections with a semi-transparent background color and add a background image using CSS to the #main or #wrap_all. https://imgur.com/B65jmT2

    2. If you need solid colors or image as color section background and continuous line background over the solid color please use custom CSS to add the image as a pseudo element. This is not going to work as background image it will be over other elements. A workaround for this would be to add a custom class to color section contents and add a z-index higher than the pseudo element image.

    If you still have any issue please upload a screenshot/mockup to one of the below sites and share the link here so we can help you better :)

    https://snag.gy/
    https://ctrlv.cz/en/
    https://imgur.com

    Best regards,
    Vinay

    #1003064

    Hi Vinay,
    Thanks for your reply.
    Version 1 should do the trick I guess :) so could you please explain how I add the picture to the #main or #wrap_all?
    Thanks a lot :)
    maurice

    #1003747

    Hi,

    If you edit the section you can add a background image to the section and that should do it.
    have you tried it?

    Best regards,
    Basilis

    #1003868

    Hi,

    I have created a test page for you.

    Please find the CSS in the code block section of the test page. You can move it to Quick CSS to affect all pages.

    Please add a unique section ID and background color using custom CSS.

    #section-1 {
       background: rgba(238,238,34,0.25)!important;
    }
    
    #main:before { 
    content:'';
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-image: url(https://esi.mylysi.com/wp-content/uploads/2018/08/12573e913107e5b-ConvertImage.png); background-repeat: no-repeat; background-size: cover; 
    background-position:100% 0%;
    }

    Best regards,
    Vinay

    #1006038

    Hi Vinay,

    Sorry for he delay, finally found time to look into that issue.

    First – thank you for your code I tested it and it does somehow what I wanted but it seams to still have a little bug.
    I created a new page (see private) to test it. The problem that occures is that the background picture is only as big as the actuall screen size of the device that loaded the page. As soon as I start to scroll, everything below the starting screen has no background anymore. I also tried to change the code to

    background-repeat: repeat;

    or

    background-size: cover;

    still same problem.

    Any idea?

    Thanks
    maurice

    #1006404

    Hi,

    Because it is not a fixed layout the background image will scroll please use a large background image whose height is same as the page itself and it should work for you.

    Best regards,
    Vinay

    #1006564

    Hi Vinay,

    Sorry maybe I do not understand you correctly, but:
    The background picture is actually much longer than the one you can see on the page, and this is the problem. The background is 1500 x 8000 px so that it is long enough for all pages. But the theme somehow cuts it off as you can see in the 2 screenshot attached..
    I also attached the background picture for you so you can see how it should look like.

    ps I moved the page to another domain – you can find the link below.

    Best,

    #1006576

    Hi Vinay,
    Found out what the problem was. I had to add a height indicator to solve the issue :)
    So for those who want to do something similar here the code that works:

    #section-1 {
    background: rgba(238,238,34,0.25)!important;
    }

    #main:before {
    content:”;
    position: absolute;
    height: 3000px;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-image: url(picture URL); background-repeat: no-repeat; background-size: cover;
    background-position:100% 0%;
    }

    #1006837

    Hi,
    Thanks for sharing your solution, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,
    Mike

    #1007957

    Hi Mike,
    Guess you can close it :)
    Thanks

    #1008008

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Background Picture (Scroll) over whole page’ is closed to new replies.