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

Justin Boling
Justin Boling
899 Points

What's wrong with my CSS Code?

So, I understand the general reaction is going to be, go on in your classes, but I am continuing in my css course. Since I've dabbled in web design for several years and this if the first time I'm really sticking to it, I'm giving myself projects to keep learning. I told my friend I would make a website for his wife's business. Long story short, I'm working on it as I learn.

So here's my problem... I'm having trouble getting a background image to display at the top of my page, in the header. I want one background image for my whole page, and a different image for the header. I want image-one.jpg to be the background for the entire section above my nav bar. However, it is not working. Please tell me what is wrong with my code?

HTML: <!--DOCtype html-->

<html>

<head> <title> Updos by Mel </title> </head> <link rel="stylesheet" href="style.css" /> <body> <div class="top"> <header> <img src="Hair Logo 2.png" class="main-logo"> <h3> Updos by Mel <sub>©</sub> </h3> <h3> Lititz, PA </h3> <h3> "We are all of us stars, and deserve to twinkle." -M. Monroe </h3>

        <nav>
            <div class="nav-bar"> 
            Home &nbsp; &nbsp; &nbsp; My Mission &nbsp; &nbsp; &nbsp; Testimonials &nbsp; &nbsp; &nbsp; Photos &nbsp;&nbsp;&nbsp; Schedule A Date 
            </div>
        </nav>
    </header>
    </div>
<main>
    <h1> Welcome to Updo's by Mel! &copy; </h1> 
        <p> Hello, my name is Melody Fedder. I grew up in Norfolk, VA, and now live in Lancaster, PA with my husband and four sons. You heard that right, four boys! I have been
        a hairstylist for the past 99 years. Just recently, I have been blessed to turn my focus from the cookie-cutter world of hair salons, and enter the wonderful world of 
        weddings. So, if you're a bride, and you want to make sure your hair is just perfect for your special day, I would be honored to serve you. Please feel free to view
        my many testimonials, and browse photos on my website. Then, when it's time to hire the hairstylist for your dream wedding, <a href="#"> contact me </a>, and we'll set
        up the appointment on the big day!
        </p>
</main

<footer>
</footer> 

</body>

</html>

CSS:

body { background-image:url(lights.png); text-align: center; background-size: 100%; } /* color: #f207b7; */

.main-logo { border: solid white 5px; border-radius: 50%; } header { font-family: brush script mt; color: #f207b7; font-size: 16pt; } .nowrap { white-space: nowrap; } .nav-bar { background-color: white; border: 2px solid purple; width:100%; } .top { background-image: url(image-one.jpg); position: absolute; z-index: 1; }

1 Answer

dragos busuioc
dragos busuioc
24,908 Points

the path inside url() must be betwwen quotes url('path')