Add an Image to whole page for background

  • Unknown's avatar
    holycowranches · Member ·

    Hello, I would like to have a few pages on my site have a whole image (with decreased opacity) for the background. Is there a way to do that with my theme?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    eallas · Member ·

    Howdy holycowranches!

    If you could let us know which pages and what image you would like in the background, we can help create the code.

  • Unknown's avatar
    holycowranches · Member ·

    The pages are titled Corporate Partners and Nonprofit Partners. The images I would like to use for their backgrounds are also posted on their page.
    Thank you so much!

  • staff-loquaciousloon · Staff ·

    Hi @holycowranches!

    There are a few things you’ll need – first, the ID of the page, so you can write a style for just this page. Second will be the URL (address) of your image.

    They can actually both be found in the Editor:

    How to find Page IDs (edit your page, and look in the address bar to grab the ID)

    Then, you can edit the image in your post to pull up it’s settings, from there you can copy its URL (there’s an example on this page.

    Armed with those details, we can set up a style for a page (don’t copy and paste the code below just yet, this is an example and you’ll want to use a different image) 

    .page-id-339 #content {
    background-image: url(https://holycowranches.files.wordpress.com/2017/01/img_7946-rr.jpg);
    background-size: cover;
}

    The page ID for your Corporate Partners page is 339, so I’ve used that in the CSS. You can make additional styles for other pages using their IDs.

    The URL can also be swapped out :)

    Speaking of images – you mentioned opacity, which is smart. CSS doesn’t provide an option for changing the opacity of just the background image (you’d also be changing the opacity of the text/images on top of it).

    Because of that, I’d recommend editing your image before uploading, and adding an overlay on top of it.

    You can use software on your computer, or try online tools, like the one I used in this thread:
    https://en.forums.wordpress.com/topic/filter-on-background

    Once you have an image that is faded the way you like, upload that and use it for your background :)

  • Unknown's avatar
    holycowranches · Member ·

    Hmmmm, Not sure why it didn’t work. I think I understood what you meant. Can you check what I pasted in CSS please? I am using a new edited photo with decreased opacity. Thanks so much!

  • staff-loquaciousloon · Staff ·

    I see the problem – the code in my last post didn’t get formatter properly (not sure why, sorry about that!) so an extra backtick got copied in. I removed that while I was looking and it works now :)

    Image looks great, by the way – perfect level of opacity on that top layer!

  • Unknown's avatar
    holycowranches · Member ·

    Oh man! That does look nice!!!! Thank you soooo much! :-)

  • Unknown's avatar
    holycowranches · Member ·

    Oops, I tried the CSS with photo and page changes noted for the Nonprofit Partners page. It didn’t work?

  • staff-loquaciousloon · Staff ·

    Hm. I see some incomplete CSS using that page’s ID:

    .page-id-282 #content {
	background-image:

    If you add the URL in for your image, like in the other style, you should be good to go. Let me know if it still doesn’t work after you add that in (and paste the CSS you tried into your post) :)

  • The topic ‘Add an Image to whole page for background’ is closed to new replies.