Background image on Home page

Support Area Forums Photobug Background image on Home page

This topic contains 1 reply, has 2 voices, and was last updated by  Bill Robbins 2 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
URL to the page in question: http://
  • Author
    Posts
  • #26966

    Kais
    Participant

    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

    #26970

    Bill Robbins
    Moderator

    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(http://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

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

The topic ‘Background image on Home page’ is closed to new replies.