Archived topic
Background image in specific content area
5 replies · Started by Leanne on July 22, 2021
I'm trying to put a background on a page in a specific content block.
I've tried a few variations of this: .page-id-1825.site-content { background-image: url('https://www.headlessgnomes.com/wp-content/uploads/2021/07/Fangs-Foul-Play-Website-Background-Image.jpg'); }
This is the page in question: https://www.headlessgnomes.com/comics/fangsandfoulplay/
Hi Leanne,
Can you specify which content block you're trying to add it on? Perhaps provide a mockup of how you want it to be applied?
The CSS you've provided has syntax issues. But if we fix it and actually apply, I'm not sure the result will be desirable.
The effect would be something like this - https://share.getcloudapp.com/eDuydDww
Hi Elvin,
It is the block you demonstrated.
The .site-content block I believe, the white area between the menu and the footer.
Let me know if that clears it up!
Try this one, there should be a space between .page-id-1825 & .site-content.
.page-id-1825 .site-content {
background-image: url(your image url);
}By the way, I just tested the image link in your original post, it leads to a 404 page, please check :)
Thank you, Ying! That worked :) Now I have to do some resizing, lol! But at least it's in place.
For some reason when I copied it it added the string of numbers after the 'jpg' which made it not work in this thread. Looks like the quotation mark didn't copy well.
You are welcome :)
