The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

Multiple background images on a one page layout (4 posts)

  1. geeked.out
    Posted 5 years ago #

    I recently purchased a one page scrolling theme.

    It is based on the 960 grid and uses jQuery.

    My question is what is the best way to go about displaying a different background image for each "page" (section) on the one scrolling page?

    I attempted a basic body class fix in the header.php file thinking that I could simply call each page using ".page-id-1" type code.

    Unfortunately it calls on the first page or .home page and then there is no styling for the following pages.

    Thanks for the suggestions in advance!

    This is the theme:


    This is an example of someone using "multiple" backgrounds (two different repeating tiles alternating every other section):


  2. @mercime
    Volunteer Moderator
    Posted 5 years ago #

    These are the divs surrounding the different sections in the default theme:

    The solidgiant customization involved adding new surrounding divs with 100% width around the section_portfolio, section_aboutme and section_contact areas so background image would extend.

  3. geeked.out
    Posted 5 years ago #

    Hi Mercime - thank you for the response!

    So I would have to create new 100% width divs around each content area to insert multiple backgrounds.

    Which file would I be modifying?

    The stylesheet? would I modify the page.php file?

    Thanks a million!

  4. @mercime
    Volunteer Moderator
    Posted 5 years ago #

    geeked.out, I wouldn't know as I don't have access to that premium theme. Best guess would be either home.php or index.php.

    You would be modifying the style.css and that file rendering the code in that page. You would also need to include the background images for your sections called in style.css in your theme folder and upload to server.

Topic Closed

This topic has been closed to new replies.

About this Topic