-
Posts
-
Hello,
What is the way to attribute different body backgrounds for each page, using some css, without plugin like wp-backgrounds-lite ?
I tried to use this code, but it doesn’t work :.page-id-2519 body{
background-image: url(http://www.mywebsite.com/image.jpg);
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}Thanks !
Hi fcp!
Thanks for reaching out to us on the support forum.
You’re on the right track with your CSS code. Try placing the body tag before the page id because HTML tags always precede classes and ids; or you can also just remove body. So you can have either:
body.page-id-2519 { /*insert style here*/}or.page-id-2519 {/*insert style here*/}Let me know if this helps :)
Best regards,
JordanI have tried the above to place a backround-image that repeats so that it shows on the entire page; behind the sidebar etc– I want it to tile over the entire page. What am I doing wrong?
body.page-id-7224 { background-image: url("https://wp.me/P4Qik2-1Sw") !important; background-repeat: repeat !important; }Hi everybody, is there another way to put a single full screen image background for each page instead to write CSS code, because i’m a newbie and i’ve no idea where i have to write those things….
thanks to much
Hi Jordan !
I tried to place the body tag before the page id and remove body, but both don’t work…
Another solution ?Thanks
Hey fcp!
Thanks for getting back in touch.
Could you please provide a link to your website and temporary login access. You can send the details using the Private Content section in your reply.
Regards,
JordanHi , i need to find a solution as well . I tried with plugin but it did’d work, so how can i change on each page background image?
Thanks in advance
I only want to know if there is a way to do it via css code and obviously I’m not the only one… because I took a look to all the articles concerning that on your support, and the only answer are plugins ^^
Hi!
Custom body background works only when the layout options are set to Boxed layout in Enfold > General Layout.
This is because when you use a stretched layout each container has it’s on background.
Once make these changes please use the CSS in Quick CSS with page ID.
html.html_boxed .page-id-74:before{ content: ""; position: fixed; left:0; top:0; width: 100vw; height: 100vh; overflow:hidden; background: #333333 url("http://localhost/_proj/enfold/wp-content/uploads/2015/07/minimal-portfolio-banner2-1.jpg")!important; background-repeat: repeat!important; background-size: cover!important; }Best regards,
Vinay KashyapMy layout options are already set to Boxed layout and I have set dots-mini-light.png file like background on all my pages.
But what I only want to do is changing this background on some pages, and your new css code still doesn’t work.Robert, giorgiosilvia… Does one of these different codes work for you ?? Am I the only one to still have this issue ?
Thanks !
Hey there, I do not work for enfold but I did what you are wanting to do another way.
I simply put a color section on certain pages and made the background of that different on certain pages. Then put all of the text and content, etc.. inside of that.
You cannot put a full width slider or a grid row inside of a color section, but you can put any other elements into it you need. Doesn’t matter about the slider, it has its own background or content anyway, so maybe this is a solution for you.
Shanna
Hi fcp
Try to read here it’s been useful for me … Read What Guenny wrote. I don’t use box layout. Anyway have a look
Let me know please
Hi!
The CSS code was tested on our installations and it works correctly you need to make sure you have the correct page ID.
If you like us to setup a demo on your site please create a temporary user with ‘administrator’ role and share in private content with permission to deactivate all plugins and add custom code if necessary to help you resolve this issue.
Thanks everyone else for your help and inputs :)
Cheers!
Vinay KashyapHi Vinnie !
So I deactivated my WP-Backgrounds Lite plugin and made sure that I had the correct page ID. I disabled my background image in General Style in the Theme Options, but absolutely nothing happened.
Nevertheless, trying to make my content transparent, I realized that with the previous code I mentioned, my image correctly appears on my page background, but it only appears in the “box”, not on the fullwidht of my page. Indeed, around the box, the background color defined in the General Style section in the Theme options continues to appear.
Maybe something just have to be adjusted “around” this code… Do you have any idea ?==> The code I am talking about is :
.page-id-2519 body{
background-image: url(http://www.mywebsite.com/image.jpg);
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}Thank you !
Hi!
“.page-id-xxxx body ” is not a valid css selector instead just use the “page-id-xxx” selector it should work and page-is-XX will be same width as the container so the background will not stretch to the page width.
Solution is to use a pseudo element to page-ID with 100vw and 100vh it will work fine.
In your case the reason you are not able to see the background image could be because another element has a higher z-index but we cannot say for sure without inspecting the page.
If you still have any doubts we can setup a demo on your site please create use admin user and share the login details in private content only we moderators will be able to view it.
Best regards,
Vinay KashyapHi Vinnie,
I tried to create a new user for you on WordPress, but I need a contact address (e-mail) to do that.
Could you please give me one ?Thanks
Hi!
we are lots of moderators here in this forum. That’s why please provide us login credentials here as private reply, so only we moderators can see it.
Regards,
AndyHi!
I created a test page for you and used this code inside your Quick CSS field, which is unique (only working on this specific site):
html.html_boxed.responsive.av-preloader-disabled.av-default-lightbox.html_header_top.html_logo_left.html_main_nav_header.html_menu_right.html_slim.html_header_sticky.html_header_shrinking_disabled.html_header_topbar_active.html_mobile_menu_phone.html_disabled.html_header_searchicon.html_content_align_center.html_header_unstick_top_disabled.html_header_stretch_disabled.html_entry_id_6401.html_av_admin_bar_active.avia_desktop.js_active.avia_transform.avia_transform3d.avia_transform.avia_transform3d.avia-webkit.avia-webkit-49.avia-chrome.avia-chrome-49.avia-mac { background: red; }Clear browser cache and hard refresh a few times, if you don’t see the red background on this page.
Cheers!
AndyHi Andy !
It works on Chrome, not on Safari. I need to test this code with an image to know if it correctly works, but anyway, how could it work with all browser ?
Thanks !
Hey!
try this code for Safari:
.html_boxed.responsive.av-preloader-disabled.av-default-lightbox.html_header_top.html_logo_left.html_main_nav_header.html_menu_right.html_slim.html_header_sticky.html_header_shrinking_disabled.html_header_topbar_active.html_mobile_menu_phone.html_disabled.html_header_searchicon.html_content_align_center.html_header_unstick_top_disabled.html_header_stretch_disabled.html_entry_id_6401.avia_desktop.js_active.avia_transform.avia_transform3d.avia_transform.avia_transform3d { background: red; }Regards,
AndyHi Andy,
It works with a colored background, but which code do I have to add to do the same thing with an image ?
Thanks !
Andy,
Sorry for the last question, I finally found the solution by myself.
Nevertheless, I’ve got another question : if I want to apply the same background to several pages of my website, is there a way to put more than only one page id in this code ? Or do I need to copy and paste this code for each page I want to change ?
Thanks !
Hey!
you can just copy your code and insert different page-id’s to it or you can separate them with a comma, like:
.page-id-1 .your-custom-code, .page-id-2 .your custom code { font-size: 10px; }Hope this helps!
Best regards,
AndyOk, so I need to copy this entire code several times anyway ? No easy way to put several page id’s in the same code ?
- You must be logged in to reply to this topic.