Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Hi there, I am making a new design for my website, I want a background image floated on the right and nav floated left.

HTML:

<body> <div class="left-section"> <header> <a href="index.html" id="headings"> <h1>Luciano's Paradise</h1> <h2>ALL DAY EVERY DAY</h2> </a> </header> <nav> <ul> <li><a href="index.html" class="selected">Home</a></li> <li><a href="menus.html">Menus</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <div id="wrapper"> <section class="homepage"> </section> </div> <div class=""> <footer> <p>&copy 2015 (insert name here)</p> </footer> </div> </div> </body>

CSS:

@media screen and (min-width: 1080px) {

.left-section {
    background-color: #25242c;
    width: 35%;
    float: left;
}

#wrapper { max-width: 65%; float: right; margin: 0 auto; padding: 0 5%; }

.homepage {
    background-image:url('../images/homepage-pizza.png');
    background-size: 40%;
    background-position: center;
}

#headings {
    text-align: center;
}

h1, h2 {

}

h1 {
    font-size: 2.625em;
    padding: 40px 0 0 0;
}

I know this isn't very clear as to what I'm trying to ask, is there a better way of asking for help? This is my first time asking a question on treehouse, I do apologize. Is there a way to post a screenshot to show what I need help with? I can't seem to put much code to explain everything.

Steven Price
Steven Price
15,398 Points

Hey, I'm not sure I get what you're asking... so you would like to have your navigation floated left

CSS:

nav {
     float: left;
     width: 35%;
}

Then you'd like an image to be floated to the right of the navigation?

If so, you could just use an HTML img tag instead of trying to set a background image through CSS:

HTML:

<div id="wrapper">
     <img src="../images/homepage-pizza.png" alt="Image of Pizza">
</div>

CSS:

#wrapper {
     width: 65%;
     float: right;
}

img {
     width: 100%;
}

or if you really want to set a background image with CSS

CSS:

.homepage {
    background-image:url("../images/homepage-pizza.png");
    background-size: 40%;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 10%;
    margin: auto;
}

#wrapper {
    width: 65%;
    float: right;
}

the image won't show unless you specify a height for the .homepage section, so you'd need to adjust that to fit the style you are going for...

Hopefully this helps point you in the right direction, Good luck!

I really appreciate your input, thank you very much :)