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 Peter G.
Peter G.
Courses Plus Student 5,806 Points

Back-ground image re-sizing problem

I'm having trouble with this webpage, when I re-size the browser, the background-image leaves a lot of white space when changing the size of the browser. Thanks for all for the help. :)

<html> <link rel="stylesheet" type="text/css" href="C:\Users\tom\Desktop\CSS\Mark & Howie Wedding/itinary.css"> <meta name="viewport" content="width=device-width"> <head> <body> <div class="wrapper"> <ul class="nav"> <li class="home"><a href="#">Home</a></li> <li class="location"><a href="#">Location</a></li> <li class="itinerary"><a href="#">Itinerary</a></li> <li class="photos"><a href="#">Howie & Mark</a></li> </ul> </div> <div class="card"> <div class="sign"> <ul class="mark"> <li>Howard & Mark's wedding beings</li><br> <li>We start dancing</li><br> <li>Everybody has fun</li> </ul> </div> </div> </body> </head> </html>

body { background-image: url("http://i.istockimg.com/file_thumbview_approve/20453608/2/stock-photo-20453608-wedding-sign.jpg"); background-repeat: no-repeat;); background-repeat: no-repeat; background-size: cover; } .wrapper { top: 10px; height: 175px; width: 1100px;
background-color: black; opacity: 0.8; margin: auto; border-radius: 10px; z-index: 0;

} .card { display: inline-block; width: 700px; height: 350px; margin: 40px; background-color: white; border-radius: 20px; text-align: center; } .sign { margin: 35px; width: 617px; height: 267px; border: solid black; border-radius: 5px; font-style: oblique; font-weight: 600; text-align: center; } .mark { font-size: 35px; list-style-type: none; } ul.nav { display: inline; color: white; text-decoration: none; text-align: center; padding: 8px 15px; border-radius: 5px; text-align: auto; } ul.nav li { float: left; margin-left: 50px; }

ul.nav li.home { padding: 35px 15px; margin: 20px; top: 15px; font-weight: 100; height: 55px; width: 130px; font-size: 40px; } ul.nav li.home:hover { background-color: #138f00; border-radius: 8px; } ul.nav li.location { padding: 35px 15px; margin: 20px; font-weight: 100; top: 15px; height: 55px; width: 180px; border-radius: 5px; font-size: 40px;

} ul.nav li.location:hover { background-color: #138f00; border-radius: 8px; } ul.nav li.itinerary { padding: 35px 15px; margin: 20px; font-weight: 100; height: 55px; width: 200px; border-radius: 5px; font-size: 40px; } ul.nav li.itinerary:hover { background-color: #138f00; border-radius: 8px; } ul.nav li.photos { padding: 35px 15px; margin: 20px; margin-left: 40px; font-weight: 120; height: 55px; width: 250px; border-radius: 5px; font-size: 40px; } ul.nav li.photos:hover { background-color: #138f00; border-radius: 8px; } ul.nav li a { color: #faf3bc; display: block; text-decoration: none; }

2 Answers

Andrew Molloy
Andrew Molloy
37,259 Points
Andrew Molloy
Andrew Molloy
37,259 Points

You've got a fixed width for the wrapper, try width:100% instead.

Peter G.
Peter G.
Courses Plus Student 5,806 Points

but my li tag " Howie & Mark " keeps jumping out and onto the next line. How would I stop it from doing that?

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Peter G.,

I'd like to see the actual web page and the html. Below are a couple of things you might want to change.

-- ); -- after the first backbround-repeat: no-repeat; in the body selector has to go.

A second --backbround-repeat: no-repeat;-- in the body selector.

I'm not aware of an --auto-- value for --text-align--, although it probably doesn't matter here.

Also, I don't see any media queries that might help when resizing the viewing area.

Jeff

body {
    background-image: url("http://i.istockimg.com/file_thumbview_approve/20453608/2/stock-photo-20453608-wedding-sign.jpg");
    background-repeat: no-repeat;);
    background-repeat: no-repeat;
    background-size: cover;
}

ul.nav {
    display: inline;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 8px 15px;
    border-radius: 5px;
    text-align: auto;
}