Is there a way to use a custom background image for only the home page?
-
I have a WordPress.com premium account, and I’d like to use a custom background image on my site’s home page, but use one of the themes standard background colors for the other pages on the site. Is this possible? And if so, how do I only change the background for my home page? Thanks in advance for your help.
The blog I need help with is hrbassman.com.
The blog I need help with is: (visible only to logged in users)
-
Try this;
.home.custom-background{ background: #111 url(your-image-url.jpg); background-size: cover; } -
@nizamilputra, thanks for the suggestion. As I am really new to adding html to my site, could you be a little more specific as to exactly where I should add this code? Thanks in advance for your response.
-
Just to avoid confusion that’s not HTML it is CSS. You can add it by going to Appearance > Customize > CSS and pasting it into the text area (you can delete all the existing demo text in there if you like too). The live preview should then update to show your changes and if you like them you can click the Save button to make it go live to your site.
-
-
Hey all. So I followed your directions and suggestions. However, even though I made sure to resize my image prior to uploading its url into the CSS code listed above, the image did not “appear” correctly. Rather, only a small bottom corner of the original image showed.
I followed the theme’s guidelines for image pixel width and height; but that didn’t seem to change anything. Any ideas on how to address this so the image will actually show correctly on the page?
-
What’s the image you are trying to use, could you post the URL for it in your media library so we can check?
-
Sure. The link is:
http://hrbassman.files.wordpress.com/2014/09/bassfingaz.jpgI reduced the dimensions to be under the limit for the specific theme (limit is 1280, so my image is reduced to 1100 x 699). Also, the file size is only 515kB.
I appreciate the help on this!
-
Try this out and let me know if it’s what you were after:
body.home { background: #111 url(http://hrbassman.files.wordpress.com/2014/09/bassfingaz.jpg) top left no-repeat fixed; } -
@halluke That totally worked. Thank you so much. So, is there a simple way you could explain to me what was different about this CSS code you sent that made the difference – just so I feel I’ve learned something going forward.
-
I just made sure to explicitly set all the background options and then crossed my fingers, toes and eyes!
-
- The topic ‘Is there a way to use a custom background image for only the home page?’ is closed to new replies.
WordPress.com Forums 
