Question

Photo of Brad Kemp

0

How to Add Background Image to Homepage Only

I need help in getting a look similar to this site: https://www.newcovenantbible.org/

They have a dark brown color on the top half of their homepage. We are trying to do the same thing but replace it with an image so that it looks similar to this: http://www.churchitnetwork.com/.

We only want it on the homepage.

Here is our site: http://hopeoflebanon.com/

Thanks for any help.

  • Photo of Michael Garrison

    0

    Brad,

    Your external site homepage is not, by default, a page that's reused to display other content based on parameters. So any blocks you add to that page should only show up on that page. So a very basic approach would be to add an HTML block to the page, and put in the HTML tags you need to get the look you want. I would guess you want a div tag with a style of position:absolute and width:100%, which you can set a backgroundImage on- then the rest of your content can start with a large top margin (leaving the top part of the image visible) either in the same block, or another HTML block further down the page.

    Read up in the "Building Websites" manual in the "Learn" section of the RockRMS site, to see how to add blocks to pages.

    How much experience do you have creating web pages?

  • Photo of Brad Kemp

    0

    Hi Michael,

    Thanks for the answer. I had already played around with the method you had suggested and tried it again after I read your answer thinking I missed something. But the problem I have is that the width of the image I'm trying to insert on the homepage is always restricted to the width of the content. ie, I'm assuming there might be a container of some kind that has a defined width for the main content ....so I can't get the image to span the full width of the site, only the main content width.

    To answer your question, I have only decent knowledge of building the pages but have done several sites over the last few years. But any time I want to do something that is not an "automated" type of change, I usually can find an example of code, etc. on the web. But nothing so far for Rock.

    Any ideas?

    Thanks!

    • Michael Garrison

      Brad, sorry I didn't see your reply until just now
      There was some discussion about this in Slack just the other day, and I believe that the solution was to copy an existing template and change the bootstrap container from class="container" to class="container-fluid" .


      Possibly you could make the change with jQuery instead, also