Menu icon Foundation
Setting a background image in Foundation?

How do you set a background image for a section in Foundation similar to the homepage of http://foundation.zurb.com/. How did they set the blue star background? I tried some things but couldn't figure it out. Still new to Foundation and they didn't talk much about images so if anyone could help me out then thanks!

imagesBackground images

How do you set a background image for a section in Foundation similar to the homepage of http://foundation.zurb.com/. How did they set the blue star background? I tried some things but couldn't figure it out. Still new to Foundation and they didn't talk much about images so if anyone could help me out then thanks!

Lynda Spangler over 5 years ago

They are just using a background image.

Here is their code. As you will notice they are wrapping the rows with a section. Then they add a background image to the section. Here is a Pen that replicated the home page background: http://cdpn.io/Asgno

<section id="homepage-hero">

  <div class="row">
    <div class="medium-7 large-6 columns">
      <h1>Foundation</h1><br>
      <h3>The most advanced responsive <br class="hide-for-small">front-end framework in the world.</h3>
      <br>
    </div>
  </div>


  <div class="row">
    <div class="large-4 medium-6 columns">
      <a class="large button hide-for-small" href="http://foundation.zurb.com/develop/download.html">Download Foundation 5</a>
      <a class="small button show-for-small" href="http://foundation.zurb.com/develop/download.html">View Download Options</a>
    </div>
  </div>

</section>

Harry Pearson 12 months ago

Thanks for sharing the code Lynda Spangler

Irfan Sattar over 5 years ago

Ah yes, that did work. I saw the "homepage-hero" id when I was using Chrome's Inspect Element tool and so I tried something similar but it didn't completely work so I think some of my css code may have been missing. Thanks again!