custom background image for the index page

Tagged: css

This topic has 7 replies, 2 voices, and was last updated 8 years, 11 months ago by Andykev.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
May 9, 2015 at 3:33 pm #15780
stewk
Customer
I need to display a custom background image for the index page only. I’ve tried a plugin, and also tested with these lines in the stylesheet:
.custom-class {background-color:#ff9900;}
body.custom-background {background-color:#333;}
May 9, 2015 at 9:12 pm #15782
Andykev
Customer
You need to add the page ID.
```
body.page-id-4 {
    background-color: #FF0000 !important;
}
```
You add this code to your CSS file. The Page ID can be found on the page you want, by clicking the “GET SHORTCODE” as an easy way..it’s the number which follows your URL/-XX

Have fun!
May 9, 2015 at 9:13 pm #15783
Andykev
Customer
Um, you would change the “4” in the example to your actual page ID number, which can be something like 94, or ?? And of course change the color code to the one you want.
May 10, 2015 at 3:52 am #15788
Andykev
Customer
I just saw you wanted an image, which you can do instead of color. The code is similar:
```
body.page-id-XX {
 background: url("/wp-content/themes/yourTheme/path-to-image/image.png") !important;
}
```
Substitute the “XX” for the page ID for your selected page. The URL path is for the image you wish to use for the background. Make sure that is is properly formatted and optimized.
May 10, 2015 at 1:35 pm #15791
stewk
Customer
I don’t see an option to ‘Get Shortcode’. The slug for this page is 64-2, and I see the ID in the source is ‘page-id-64’

I now have this in my style.css:
body.page-id-64 {
background-color: #FFCC66
background-image: url(“http://216.92.218.40/media/new-home.jpg”;) !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 25%;
}

Still not showing.
May 10, 2015 at 3:36 pm #15792
Andykev
Customer
You have this in your inline style sheet which appears to override the change:

body.custom-background { background-color: #ffffff; }

I changed the #ffffff to your color #FFCC66 and the sample page changed to golden yellow.
May 10, 2015 at 3:39 pm #15793
Andykev
Customer
And you have this set as well”

body.custom-background { background-image: none;}
May 10, 2015 at 3:51 pm #15794
Andykev
Customer
Using the inspector, I changed the line to this on your Bio page. As you can see it worked. I took one of your URL image links from your site but it didn’t work, so I don’t know if your images are still available.
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.