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

HTML

Posted by Sid gaffar
Sid gaffar
554 Points

Adding a Large Background image

Hello

I would like to add a large background image to my site

The Header containers the logo and the nav and would like this at the top and then and image in the background

do I add a (div jumbotron) ?

This is my coding <header> <a href="index.html"> <h1>Sid Gaffar</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="">portfolio</a></li> <li><a href="">about</a></li> <li><a href="">contact</a></li> </ul>

        </nav>
    </header>

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

First off, "jumbotron" is not an HTML attribute name. But it's a classname often used with the bootstrap framework. You didn't name or link to your course, but your code snippet doesn't look like bootstrap is being used.

But if you want the image to appear as a background, you won't need to add an element to your HTML anyway. Just give the element you want affected a background-image property and value in your CSS.

For example, if you want the background behind the entire document body:

body { background-image: url("your_image_URL.jpg"); }

If you want the background only to appear behind the header, just subsitute header for body.