Background image on Home page

[Kais]

Hi Bill

I am hoping you can point me in the right direction.

I would like to have a big background image, similar to the Foxy theme, only on the home page.
We used Foxy on another client’s website – they love it and so do I.

I have been trying figure out how to do this.

#1 Can I create a page template – background image page
and then use the jquery Supersized script on this page?

Or

#2 do I need to add this jquery script load to another page?

Could you tell me the name of the page in the Photobug theme that I would look for?

Thanks

Kais

[Bill Robbins]

Excellent question Kais,

You can do that with just some CSS. Here’s what to do:

1. Go to the Media Section in your WordPress dashboard and select Add New. Upload the image you’d like to use. Once the upload is complete, click on the edit link. Look on the right hand side of the screen that opens up for the File URL. We’ll need that in just a minute.
2. Go to your theme options page and choose the Style tab.
3. Scroll down to the Custom CSS box and add this:

   
   body.home {
   	background-image: url(https://yoursite.com/image.jpg);
   	background-size: cover;
   	background-attachment: fixed;
   	background-position: center center;
   }
   

   Replace the http://yoursite.com/image.jpg with the URL to the image you uploaded earlier.

4. Update your settings.

When I made Foxy, I had never heard of the background-size property. It’s widely used now and makes hero images much easier to manage too. It’ll force the background image to completely fill the entire background.

Have a great weekend,
Bill

[Author]

Posts