Not totally sure without seeing the site, but try this:
body.page-id-363 {
background: #fff url(Scrapbook-paper-3.jpg) repeat left top;
}
also make sure that file path is valid – you may want to use the absolute path to where the image is stored.
Thank you, WPyogi. I tried it with both the short file name and the absolute file name, but no luck. The default tiled background is still there.
Here’s the link to my page:
‘http://raviolithewriter.com/landing-page-test/’
Any other ideas?
I don’t see that CSS code anywhere – where are you adding it? Try putting it in the custom CSS.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Where did you add that CSS WPYogi recommended?
It’s not in your stylesheet http://raviolithewriter.com/wp-content/themes/bueno/style.css
I added it to the CUstom CSS panel within the WooDojo plugin I’m using. All of the other custom css I’ve used for this page has been done through that plugin, and it all worked. I just can’t get this one thing right.
I’m very timid about making changes to the actual style.css file. Do you think it’s safe to do that as long as I back it up first?
Thanks again.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
No, I don’t think it’s safe at all.
Glad to hear you say that, and glad I didn’t do it!
IS there any other method you know of that might work?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Your style probably isn’t working because your page doesn’t have a class named “page-id-363” view-source:http://raviolithewriter.com/
Here is the code I have used in the custom css panel:
‘body .page-id-363 { background: #fff url(http://raviolithewriter.com/wp-content/uploads/2013/01/Scrapbook-paper-3.jpg) repeat left top;
}
.page-id-363 .title {
display:none;
}
.page-id-363 #pagenav {
display:none;
}
.page-id-363 #logo {
display:none;
}
.page-id-363 #topsearch {
display:none;
}
.page-id-363 #navigation {
display:none;
}
.page-id-363 .entry img {
border: 0px solid #9FCEF1;
}
.page-id-363 .post {
background-color: #FFFFFF;
border: 0px solid #EFEFEF;
margin: 0px 0px 00px;
padding: 00px 00px;
position: relative;
}’
Shouldn’t the ‘.page-id-363’ work for all or none of it? I mean, why would it only not work for the first item? I’m sorry, I don’t mean to be dense. I’m just confused.
Thanks for your help and patience.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Sorry, I was looking at the wrong page.
How are you adding that CSS? I still can’t see any Custom CSS applying to that page.
Well, I guess (and it’s just a guess) that the WooDojo plugin is doing it for me. I just type it in and hit the the “save changes” button, and it does it.
Otherwise, I have no idea.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Okay. I just changed “container” to “body” (I think that’s what you were referring to) but it had no effect.
Am I missing some other glaringly obvious blunder?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Yes, those are the wrong selectors. I’ll explain in a minute.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Using that test page’s code as an example:
A fullstop in CSS represents a class.
A hashtag in CSS represents an ID.
http://www.w3schools.com/css/css_id_class.asp
If you have this HTML;
<body class="page page-id-363 page-template page-template-template-fullwidth-php chrome">
To select the class, “page-id-363”, you’d use the fullstop just before its class name, e.g;
.page-id-363
You can select the body element without classes, just use the name of the element, e.g;
body
You can select the body element with its class for extra CSS specificity, by grabbing the name of the element and the class without using spaces;
body.page-id-363
In your case, you need to use this selector;
.page-id-363
or this;
body.page-id-363
So all-together, you should have this;
.page-id-363 {
background: #fff url(http://raviolithewriter.com/wp-content/uploads/2013/01/Scrapbook-paper-3.jpg) repeat left top;
}
