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
Ladna Meke
5,752 PointsBackground image not responsive
I have a background image set on a div, however, when I resized my browser, the image doesnt resize with the layout.
#section-one {
height: 38.096%;
background-color: yellow;
background: url('../img/bg1.jpg') center center no-repeat;
position: relative;
}
I have edited the CSS as below, but it is still unresponsive. I dont know, maybe the image size is too large or something
#section-one {
height: 75%;
background: green url('../img/top_bg.jpg') no-repeat center 23%;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
3 Answers
Brett Smith
4,261 PointsLadna try using background-size instead of width. When you use width you are changing the width of the entire element not just the background. If you only want your background to cover a portion of #section-one then use:
#section-one {
background-size: auto 50%;
background-color: yellow;
background: url('../img/bg1.jpg') no-repeat;
}
The first value sets the width and the second value sets the height.
Ladna Meke
5,752 PointsHey, I tried that, still not working
cesare
15,180 Pointsadd:
background-size: cover;
Emma Willmann
Treehouse Project ReviewerI would give the div a % for a width. Then when you scale down the browser, the div will stay a % of it's width.
#section-one {
width: 50%;
background-color: yellow;
background: url('../img/bg1.jpg') no-repeat;
}
Ladna Meke
5,752 PointsHey Emma, I've tried it.......still no improvement
Emma Willmann
Treehouse Project ReviewerCan you post all of your html and css?
Ladna Meke
5,752 PointsHere's the HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Jobseeker</title>
<link rel="stylesheet" href="css/reset.css">
<link href='http://fonts.googleapis.com/css?family=Arimo:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="img/andela_icon.png" />
</head>
<body>
<div id="wrapper">
<section id="section-one">
<header>
<ul>
<li id="menu">Menu
<ul class="collapsed">
<li><a href="#">Search Jobseeker</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Sign in</a></li>
</ul>
</li>
</ul>
</header>
<!-- <a href="#"><img id="image" src="img/logo.png" alt="logo"/></a> -->
<div id="post">
<h1>Post a Job</h1>
<ul>
<li>Post your job for free.</li>
<li>It takes less than 60 second.</li>
<li>View profiles of 1000s of jobseekers</li>
<li>Detail of jobseeker are verified</li>
<li><p class="button"><a href="#">Post a Job</a></p></li>
</ul>
</div>
<div id="sub-section">
<ul>
<li><p>Hire Drivers, Guards, Home and Office Helper</p></li>
<li id="second-line">
<ul>
<li>Save time by Hiring Online</li>
<li><span>•</span></li>
<li>Hassle free</li>
<li><span>•</span></li>
<li>Trust Worthy Candidates</li>
</ul>
</li>
</ul>
</div>
</section >
<section id="section-two">
<h1>How it Works</h1>
<ul>
<li><img src="img/icon1.png"><p>Get Started with Post a Job</p></li>
<li><img src="img/arrow_icon.png" alt="arrow"></li>
<li><img src="img/icon3.png"><p>Submit Job Information</p></li>
<li><img src="img/arrow_icon.png" alt="arrow"></li>
<li><img src="img/icon3.png"><p>Search Jobseekers for Job</p></li>
<li><img src="img/arrow_icon.png" alt="arrow"></li>
<li><img src="img/icon4.png"><p>View their mobile numbers</p></li>
</ul>
</section>
<section id="section-three">
<h1>Looking for a Job</h1>
<ul>
<li>Create your profile for free and get SMS for new jobs</li>
<li>Find your dream job</li>
<input type="button" value="Get Started"></p>
</ul>
</section>
<section id="section-four">
<h1>Our Partners</h1>
<ul>
<li><img src="img/partner1.png"/></li>
<li><img src="img/partner2.png"/></li>
<li><img src="img/partner3.png"/></li>
<li><img src="img/partner4.png"/></li>
</ul>
</section>
<footer>
<ul>
<li><a href="#">Get Background check</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">About us</a></li>
</ul>
</footer>
</div>
</body>
CSS
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
}
a {
min-height: 20px;
}
body {
width: 100%;
margin: 0;
padding: 0;
font-family: 'Arimo', sans-serif;
background-color: red;
-webkit-text-size-adjust: none;
}
#wrapper {
width: 100%;
/*background-color: blue;*/
margin: auto;
height: 100%;
}
#section-one {
width: 100%;
height: 75%;
background: green url('../img/top_bg.jpg') no-repeat center 23%;
background-size: auto auto%;
-webkit-background-size: cover; /************for other browsers****************/
-moz-background-size: cover; /************for other browsers****************/
-o-background-size: cover; /************for other browsers****************/
position: relative;
}
header ul {
text-align: center;
}
header ul li {
vertical-align: middle;
}
.collapsed {
display: none;
}
header {
height: 8%;
background: red;
opacity: .4;
position: fixed;
width: 100%;
line-height: 50px;
}
#sub-section {
position: absolute;
bottom: 0;
width: 100%;
background: yellow;
text-align: center;
height: 20%;
}
#sub-section li {
display: inline;
margin: auto 0;
}
Mark Greenwood
3,906 PointsMark Greenwood
3,906 PointsHello Ladna,
The CSS you've used will only make sure that the background-image will always remain centred in relation to your div. In order to make the image scale with the div, you will need to examine the background-size property. Depending on what you are trying to achieve you could try the following but there are many other values which may be useful.
One thing to note with background-size, however, is that while browser support is very good it's not quite there in some and may cause problems. I recommend reading up at MDN for more details.
Hope that helps!