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 Jordany Rosas
Jordany Rosas
Courses Plus Student 4,557 Points

Problem with resizing background images

I'm having an issue resizing my image. I want it to scale while the browser gets smaller. Instead, it stays in a static position while I resize the window.

Here's the code I'm working with.

<!DOCTYPE html>
<html>
<head>
    <title> Becoming a Web Developer</title>
    <meta charset="UTF-8">
    <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
    <link href='https://fonts.googleapis.com/css?family=Signika:400,700' rel='stylesheet' type='text/css'>
</head>
    <body>
        <div id="wrapper">
            <header>
                <h1>Becoming a Web Developer</h1>


                <nav class="main-nav">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </header>

        </div>

        <div class="webdev">
            <section class="secc">
                <h2> Welcome to my Website!</h2>

            </section>
        </div>
    </body>
</html>

/* Becoming a Web Developer */


body {
    margin: 0;
    padding: 0;
    background: #ccc;
}

header {
    width: 100%;
    background-color: #003366;
    height:70px;
    margin-bottom: 0;
}

header h1 {
    margin: 0;
    padding: 20px 0 0 0;
    color: #cccccc;
    float: left;

}


.main-nav ul {
    list-style: none;
    font-family: 'helvetica' ;
    font-size: 1.25em;  
    float: right;
    padding-top: 0px;
}

.main-nav li {
    display: inline-block;
    padding-right: 10px;
    border-right: 1px solid black;

}

.main-nav a {
    text-decoration: none;
    color: white;
}
.webdev {
    background-image: url('http://www.positeksolutions.com/wp-content/uploads/2015/04/web-development.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    overflow: auto;
    height: 700px;

}

2 Answers

Cindy Lea
PLUS
Cindy Lea
Courses Plus Student 6,497 Points
Cindy Lea
Cindy Lea
Courses Plus Student 6,497 Points

From what I see, you are not using responsive web design to resize website items including images. You need to use a % for sizes in most cases. It depends on what methods you are using.

mike cee
mike cee
7,302 Points
mike cee
mike cee
7,302 Points

Set your images 100% of its parent container (max-width:100%;)