WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. geeked.out
    Member
    Posted 3 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:

    http://themeforest.net/item/pixelstudio-an-elegant-scrolling-onepage-theme/full_screen_preview/126024

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

    http://solidgiant.com

  2. @mercime
    Volunteer Moderator
    Posted 3 years ago #

    These are the divs surrounding the different sections in the default theme:
    div#section_home
    div#section_portfolio
    div#section_mywork
    div#section_aboutme
    div#section_elements
    div#section_contact

    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
    Member
    Posted 3 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 3 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