Website Background Image
-
How can I make it so that my background image only appears on my homepage and not my other sub pages? For example, I want it on urbaneladesign.com but I don’t want it on urbaneladesign.com/history. Is there a way to use a CSS to do this?
The blog I need help with is: (visible only to logged in users)
-
Sure! The first thing to do is remove the background image you currently have in the Customizer’s Colors & Backgrounds panel.
Then, add this to your custom CSS to apply the background only to the front page:
body.home { background-image: url('http://urbaneladesigndotcom.files.wordpress.com/2015/11/rua-line.jpg'); background-repeat: repeat; background-position: top center; background-attachment: scroll; }Let me know how it goes.
-
Hi Kathryn,
I tried this and also one of your team members went on my site and tried it and it didn’t work….
-
I don’t see the custom CSS in your Customizer, and the image seems to be still in the Customizer as well. Could you please go ahead and make those two changes so I can go in and have another look and see what might be going wrong?
-
Hi Kathryn,
yes, I removed the CSS and added the image back when it didn’t work, your employee did the same thing. I can make those changes again or you have my go ahead to try it…
-
-
-
-
Try changing the custom CSS to this:
body.home { background-image: url('http://urbaneladesigndotcom.files.wordpress.com/2015/11/rua-line.jpg') !important; background-repeat: repeat; background-position: top center; background-attachment: scroll; } -
I think it worked but it’s too giant and doesn’t fit to the screen the way that the background image did
-
Try adding the
background-size: cover;property-value as well:body.home { background-image: url('http://urbaneladesigndotcom.files.wordpress.com/2015/11/rua-line.jpg') !important; background-repeat: repeat; background-position: top center; background-attachment: scroll; background-size: cover; } -
-
Sorry I wasn’t clear before!
You now have:
background-size: cover; body.home { background-image: url('http://urbaneladesigndotcom.files.wordpress.com/2015/11/rua-line.jpg') !important; background-repeat: repeat; background-position: top center; background-attachment: scroll; background-size: cover; }It should be just:
body.home { background-image: url('http://urbaneladesigndotcom.files.wordpress.com/2015/11/rua-line.jpg') !important; background-repeat: repeat; background-position: top center; background-attachment: scroll; background-size: cover; } -
-
Also, the scroll feature doesn’t work as it used to. The background image was still while the words scrolled up and down. Now the image and the words scroll together.
-
Try changing the word “scroll” to “fixed” – so change this line:
background-attachment: scroll;to this:
background-attachment: fixed;That hopefully takes care of both issues you mentioned.
-
-
Awesome, glad you’re set now!
Be glad to help further – but could you please start a new thread:
https://en.forums.wordpress.com/forum/css-customization
Thanks!
-
-
- The topic ‘Website Background Image’ is closed to new replies.