Website Background Image

• 

  urbanela · Member · Mar 4, 2016 at 1:13 am

  • Copy link
  • Add topic to favorites

  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)

• 

  kathrynwp · Staff · Mar 4, 2016 at 4:18 pm

  • Copy link

  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.

• 

  urbanela · Member · Mar 4, 2016 at 7:10 pm

  • Copy link

  Hi Kathryn,

  I tried this and also one of your team members went on my site and tried it and it didn’t work….

• 

  kathrynwp · Staff · Mar 4, 2016 at 7:20 pm

  • Copy link

  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?

• 

  urbanela · Member · Mar 4, 2016 at 7:27 pm

  • Copy link

  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…

• 

  kathrynwp · Staff · Mar 4, 2016 at 7:34 pm

  • Copy link

  Please go ahead and make the two changes. Thanks!

• 

  urbanela · Member · Mar 4, 2016 at 7:39 pm

  • Copy link

  done

• 

  kathrynwp · Staff · Mar 4, 2016 at 7:40 pm

  • Copy link

  Thanks. I’m taking a look now.

• 

  kathrynwp · Staff · Mar 4, 2016 at 7:42 pm

  • Copy link

  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;
  }

• 

  urbanela · Member · Mar 4, 2016 at 7:44 pm

  • Copy link

  I think it worked but it’s too giant and doesn’t fit to the screen the way that the background image did

• 

  kathrynwp · Staff · Mar 4, 2016 at 7:52 pm

  • Copy link

  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;
  }

• 

  urbanela · Member · Mar 4, 2016 at 7:54 pm

  • Copy link

  screen is gray, unless I did it wrong?…

• 

  kathrynwp · Staff · Mar 4, 2016 at 8:06 pm

  • Copy link

  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;
  }

• 

  urbanela · Member · Mar 4, 2016 at 8:08 pm

  • Copy link

  Still doesn’t capture the entire image, how do we keep resizing it to fit the screen?

• 

  urbanela · Member · Mar 4, 2016 at 8:18 pm

  • Copy link

  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.

• 

  kathrynwp · Staff · Mar 4, 2016 at 8:26 pm

  • Copy link

  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.

• 

  urbanela · Member · Mar 4, 2016 at 8:31 pm

  • Copy link

  That’s perfect, thank you so much!

  Are you able to help me with one more thing?

• 

  kathrynwp · Staff · Mar 4, 2016 at 8:53 pm

  • Copy link

  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!

• 

  urbanela · Member · Mar 4, 2016 at 9:09 pm

  • Copy link

  posted =)

• 

  kathrynwp · Staff · Mar 4, 2016 at 9:16 pm

  • Copy link

  Thanks! I moved it into the CSS Customization forum from general support.