1 Reply Latest reply on Aug 27, 2013 3:20 PM by David_Powers

    Bayside Beat Tutorial, how do I span a background photo across multiple divs?

    daveschuster

      I'm trying to get the golden gate pic to span the header, nav and hero div, but am having trouble figuring it out.  I've tried adding another div that spans the top header, mainnav and hero, but can't get the image to show behind all of those sections at once.

        • 1. Re: Bayside Beat Tutorial, how do I span a background photo across multiple divs?
          David_Powers Adobe Community Professional (Moderator)

          A background image is displayed only by the element to which it is applied. You can't get it to span multiple elements. However, backgrounds are transparent, so applying a background image to an outer element will achieve the effect you're after.

           

          I've done a simple adaptation of the Bayside Beat design that deletes the image of the Golden Gate Bridge from the HTML, and moves the hero div inside the <header> element like this:

           

            <header id="top">

              <h1>Bayside Beat</h1>

              <nav id="mainnav">

                <ul>

                  <li><a href="index.html" class="thispage">Home</a></li>

                  <li><a href="sightseeing.html">Sightseeing</a></li>

                  <li><a href="#">Eating Out</a></li>

                  <li><a href="#">What's On</a></li>

                  <li><a href="#">Where to Stay</a></li>

                </ul>

              </nav>

            <div id="hero">

              <article>

                <h2>Be Where It&rsquo;s At</h2>

                <p>San Francisco is one of the most exciting and vibrant cities  on the planet. Bayside Beat is here to keep you informed of the best places to  see, where to eat, what to do, and where to lay down your weary head after an  action-packed day—or night—on the town.</p>

              </article>

            </div>

            </header>

           

          The CSS is then changed like this:

           

          #wrapper {

              width: 100%;

              min-width: 740px;

              max-width: 1000px;

              margin-left: auto;

              margin-right: auto;

              background-color: #FFFFFF;

              background-image: url(../../images/golden_gate.jpg);

              background-repeat: no-repeat;

          }

          #top {

              overflow: hidden;

             height: 547px;

          }

           

          This results in the home page looking like this:

           

          bayside_adapted.jpg

           

          This displays the Golden Gate Bridge at the top of every page, but you could add a class to the home page's <body> tag to create separate styles for the home page.