Support » Themes and Templates » Multiple background images on a one page layout

Multiple background images on a one page layout

  • 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):

Viewing 3 replies - 1 through 3 (of 3 total)
  • @mercime


    Volunteer Moderator

    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.

    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!



    Volunteer Moderator

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Multiple background images on a one page layout’ is closed to new replies.
Skip to toolbar