See Body Image in this Snippet
Thank you, I’m trying to get it to work on a specific page rather than the main body of all pages, but I’m not being very successful…
tried:
.page-id-123 body {
background: url('/wp-content/themes/uploads/mycity_background2.png') no-repeat center #FAFAFA !important ;
margin-bottom: 0;
margin-top: 0;
}
and
body {
.page-id-123
background: url('/wp-content/themes/uploads/mycity_background2.png') no-repeat center #FAFAFA !important ;
margin-bottom: 0;
margin-top: 0;
}
and other variations… but I think I’m just typing variations blindly… which one will work? thank you.
I think syntax will be body .page-id-123 {xxxxxxxxxxx}?
or
body.page-id-123 {xxxxxxxxxxx}
Hello again,
Thank you and sorry for not getting back to you sooner. (I’ve been busy with other parts as you know I imagine).
I tried what you suggested and strangely it seems to do the same as when I had the “main-wrapper” with the background. This is what I have at the moment with the syntax you recommended:
body.page-id-123 {
background: url('xxxx.png') no-repeat center #FAFAFA !important ;
margin-bottom: 0;
margin-top: 0;
}
Maybe I’m misunderstanding what each element in the page is called and where it is so I’ll try to put it in other words:
What I would really like is:
The header as I have it (white). The footer idem (white).
In between them a background stretching from side to side (full width) but which doesn’t scroll down. A static background the width and height of the screen which, on scrolling, would remain in position and only the content to scroll upward until it reaches the end and the footer comes up.
I’m not sure if this is possible. Researching a bit (not much) I found this. Do you think I could try to apply something from here to the page? If so, which one would you recommend me to try and (maybe I’m pushing it a bit much now, just say) would I need major changes to the codes or would a kinda “cut&paste” approach work?
Thank you very much.
daniel
Yes, that’s a good site and a good post (although the post was old; you don’t need all those prefixes now). You can place the following in your Custom CSS panel in Customiz’it:
body.page-id-54 {
background: url("http://css-tricks.com/examples/FullPageBackgroundImage/images/bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
background-size: cover;
}
The “fixed” is what stops it scrolling and “cover” makes sure the page gets covered at all resolutions.
BTW: nice site!
That should, of course be page-id-123 in your case.
Hi,
Thank you for the response, and thanks for for compliment, much appreciated. I haven’t had time to try anything out yet but I’ll let you know when I do.
I’ll mark this as resolved and post again if I have issues with implementation.
Thank you again,
daniel
