Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

Help: how do I put a background image in the main/central body of my page?

Hi,

I am a coding beginner. I am trying to put an image between my header and footer as a background image, in the main body of the page if you will. I will then write on it. The problem is the only way I seem to be able to make an image appear as a background image is by targeting the "body" element in my CSS. The problem with that is that it leaves my heading alone but engulfs my footer. If I try targeting "section" or creating a class etc. to separate my central body from the header and footer... no image appears. Does anyone know how I can do this? (to be clear, I would like the background image to be were the "section" part is in my HTML. Here is my HTML:

Many thanks

 <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Rothorn Partners</h1>
        <h2>Investment Consultants</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <section>

    </section>
    <footer>
        <a href="disclaimer.html">Disclaimer</a>
        <p>&copy; 2015 D. O'Sullivan for Rothorn Partners.</p>
    </footer>
  </body>
</html>

4 Answers

highlandcow
highlandcow
7,352 Points
highlandcow
highlandcow
7,352 Points

If I understand what you're after correctly, then you could try the following:

body { background: url('path/to-image.png') no-repeat center center; }

Check out background-repeat and background-position properties for more info: http://www.w3schools.com/cssref/pr_background-repeat.asp http://www.w3schools.com/cssref/pr_background-position.asp

Actually in your case you might want to target that section element rather than body, as in my example.

Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

Thanks Highlandcow,

the problem here had more to do with the dimensions (height, width, etc.) of the section element. When I gave it sufficient "room" (a height of 500px for ex.) the image appeared and the problem went away.

Lauri Neuding
Lauri Neuding
13,525 Points
Lauri Neuding
Lauri Neuding
13,525 Points

One way I've found to deal with obstinate footers is to put in a wrapper div below the body tag but close it above the footer (usually it is just above the closing body tag), like say for a fixed footer. You can treat the wrapper like a body element or like a more contained div. For any element like footer, header, and section, I turn them into divs with classes when they don't behave <div class="section">.

Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

Great, thanks. Yeah that is basically what i did: created a section and then gave it sufficient dimensions (height etc.) for the image to appear.

Thanks

Vivien Schüler
PLUS
Vivien Schüler
Courses Plus Student 9,177 Points
Vivien Schüler
Vivien Schüler
Courses Plus Student 9,177 Points

Try adding this:

html, body, section { 
  height: 100%;
}

section { 
  background: url('path/to-image.png') no-repeat; 
  background-size: cover; 
}
Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

Thank you very much for your answer. I went for something similar and it worked.

Irina Blumenfeld
Irina Blumenfeld
9,198 Points
Irina Blumenfeld
Irina Blumenfeld
9,198 Points

Try to put some content in your section area for the background image to appear. Here's an example I created: http://codepen.io/netmagik/pen/LVaJZP

Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

Thank you very much for your answer. I went for something similar and it worked.