Different coding for different pages

susanvitalis · Member · Apr 4, 2017 at 11:46 pm
Copy link

Add topic to favorites
Is there a way to change the code so that one page on the website has the back-ground color totally opaque so it doesn’t show at all?

The blog I need help with is: (visible only to logged in users)
susanvitalis · Member · Apr 4, 2017 at 11:47 pm
Copy link
To be more specific, on my Fun Resources page on susanvitalis.com, I want the background color to be totally transparent.
garysixtyeight · Member · Apr 6, 2017 at 10:29 am
Copy link
Hi Susan,

Is it the blue background on the content you’d like to remove?

If so, please try adding the custom css below to your site.

If it doesn’t have the desired effect, please keep the css in the customizer so that we can troubleshoot it further. Thanks :)
```
.page-id-484 #content {
    background: transparent;
}
```
susanvitalis · Member · Apr 6, 2017 at 3:20 pm
Copy link
Perfect! Thank you so much! That is exactly the change I was looking for!
garysixtyeight · Member · Apr 6, 2017 at 3:22 pm
Copy link
You’re welcome :)
susanvitalis · Member · Apr 6, 2017 at 3:29 pm
Copy link
Is it possible to change the background image for one page? I’m talking about the waterfall background image that is set up to show on every page.
garysixtyeight · Member · Apr 6, 2017 at 3:39 pm
Copy link
Yes, it’s possible.

If it’s for the same “Fun Resources” page, please try adding the css below. You can replace the image url with the image you wish to use instead.
```
body.page-id-484 {
    background-image: url("https://susanvitalis.files.wordpress.com/2017/03/headshot.jpg");
}
```
If the css doesn’t work as intended, or if needs to be tweaked to suit your needs, please let me know.

Thanks :)
susanvitalis · Member · Apr 6, 2017 at 4:22 pm
Copy link
Again, thank you so much! I just need to edit the size of the picture to fill the page and that is exactly the result I was looking for.
garysixtyeight · Member · Apr 6, 2017 at 4:29 pm
Copy link
You’re welcome.

If you’d like the image to automatically fill the available space in the body, you can try using background-size: cover; in the css.

Here’s an example css snippet that can replace the previous one:
```
body.page-id-484 {
    background-image: url("https://susanvitalis.files.wordpress.com/2017/03/img_5424-e1490812613756.jpg");
    background-size: cover;
}
```
susanvitalis · Member · Apr 6, 2017 at 4:57 pm
Copy link
Oh my goodness, you are so helpful. That was the ticket. How would I code for the background image on all the other pages to cover the space? I’ve tried #body, .body, body.
garysixtyeight · Member · Apr 6, 2017 at 5:01 pm
Copy link
To apply the same css to all body background images, try adding this:
```
body.custom-background {
    background-size: cover;
}
```
susanvitalis · Member · Apr 6, 2017 at 5:29 pm
Copy link
You are amazing. Thank you so much. My site is going to be so much better because of your help.
garysixtyeight · Member · Apr 6, 2017 at 5:34 pm
Copy link
You’re welcome, glad I could help :)

No items found.