-
Posts
-
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,
mauriceHey 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,
RikardHi 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
mHi,
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,
RikardHey 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,
MauriceHi,
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.comBest regards,
VinayHi 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 :)
mauriceHi,
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,
BasilisHi,
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,
VinayHi 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 tobackground-repeat: repeat;
or
background-size: cover;
still same problem.
Any idea?
Thanks
mauriceHi,
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,
VinayHi 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,
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%;
}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
- The topic ‘Background Picture (Scroll) over whole page’ is closed to new replies.