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 Ken Chung
Ken Chung
17,585 Points

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;
}
Ken Chung
Ken Chung
17,585 Points

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
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!

Ken Chung
Ken Chung
17,585 Points

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