Okay
  Public Ticket #257320
How to Add a Background Image?
Closed

Comments

  • Arun started the conversation

    Hi! Love the theme! 

    Question: How do I add a background image to specific pages? For example I do NOT want the same background image to be on each page.

    Any help is greatly appreciated. THANKS! 

  • Chris replied

    I make the pages parallax, not sure if that is what you want.

    you can choose type of page in a drop down menu asking what page type under the content window. When you choose parallax an option to add an image appears,

    You can see how I have implemented that here www.chrisfawkes.net/photographer

  • Arun replied

    Thanks for the response!

    We are trying to set the background for individual pages so setting it to a parallax is not working for some reason :(

  • Anders replied

    Hi,

    I saw www.chrisfawkes.net/photographer menu and I liked the way it appeared in the bottom and then on top. How was this done?

  • Chris replied

    This is the custom css for putting the menu above the fold so it is seen on the home page. 

    #navigation-sticky-wrapper {

    margin-top: -60px;

    margin-left: 0px;

    }

    Then I put a semi transparent png file that only shows on the home page with this code. A 1px black line along the top is part of the png file. 

    .navbar-inner {

    background: transparent;

    background-image:url('http://chrisfawkes.net/photographer/wp-content/uploads/2014/06/menutransparentbglong3.png');

    background-repeat:repeat-repeat;

    }

    I did not put a logo in the header options but with custom css as well so I was able to get it over to the left a little more 

    .is-sticky .navbar-inner{

    background: #242424;

    background-image:url('http://chrisfawkes.net/photographer/wp-content/uploads/2014/06/underconstruc5.png');

    background-repeat:no-repeat;

    }

    The 1px line at the bottom of the menu bar

     .navbar {

    border-bottom: 1px solid #000000;

    border-top: 0px solid #000000;

    }

    Hope that helps.

  • Arun replied

    Hi Anders Björk, please make a new thread for your question so that mine does not get missed.

    As far as the background image, does anyone have a solution for this or no?

    I am not using the site as a one page view, so applying paralax background section images is not working.

    Thank you

  • Chris replied

    Try this. I have a page named information so the code would look something like 

    section#information{

    background-color:#f5f5f5;

    background-image:url('http://chrisfawkes.net/photographer/wp-content/uploads/2014/06/Informationbg2.jpg');

    background-repeat:no-repeat;

    background-size:contain;

    background-position:center;

    }

    If the page is not a secion them perhaps try 

    #information and failing that page#information

    Sorry i'm not much good at code but hopefully that works.