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
Roland Hagan
6,443 PointsFlexible or Fluid background image
Hello guys I am struggling to get this background image to adjust to the screen width. I have set media queries and the header adjusts but the background image has a white space when you scroll horizontally to the right. Can anyone help me solve this problem? Thanks in advance.
Below is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Munch | Making invisible offers edible!</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300|Roboto+Slab:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/features.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html">
<img id="logo" src="img/munch-logo.png">
</a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="features.html" class="selected">Features</a></li>
<li><a href="#contact-form">Contact Us</a></li>
<li><a href="merchants.html">Munch for Merchants</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</nav>
</header>
<div class="chalkboard">
<div class="feature-images">
<img class="live" src="img/magnifier.png">
<img class="offer" src="img/offers.png">
<img class="share" src="img/share.png">
</div>
<ul class="search-description"><li>Search and receive food offers in your locations.</li></ul>
<ul class="offer-description"><li>Redeem offers for your favourite restaurants, cafés, food stalls.</li></ul>
<ul class="share-description"><li>Share your offers with friends on Twitter or Facebook.</li></ul>
<p class="download">Download Munch today to access these great features!</p>
<a href="#" class="googleplay">
<img alt="Get it on Google Play"
src="https://developer.android.com/images/brand/en_generic_rgb_wo_45.png" />
</a>
<a href="#">
<img src="img/Download_on_the_App_Store_Badge_US-UK_135x40.svg" class="appstore">
</a>
</div>
<footer>
<a href="http://twitter.com/munchapp_"><img src="img/twitter-icon.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/munchapp1"><img src="img/facebook-icon.png" alt="Facebook Logo" class="social-icon"></a>
<p id="copy">© 2015 Munch.</p>
</footer>
</body>
</html>
Below is my CSS code:
/************************************
GENERAL
************************************/
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto Slab', serif;
}
a {
text-decoration: none;
}
p {
font-size: 1.5em;
}
/************************************
HEADING
************************************/
header {
float: none;
margin: 0;
padding: -15px 0 0 0;
width: 100%;
height: 50px;
}
#logo {
float: left;
width: 189px;
height: 37px;
margin: 10px 0 10px 50px;
}
/************************************
NAVIGATION
************************************/
nav {
text-align: center;
padding: 10px 0;
margin: -5px 0 0;
}
nav ul {
list-style: none;
margin: 5px 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 700;
padding: 5px 10px;
}
/************************************
CHALKBOARD
************************************/
.chalkboard {
width: 100%;
margin: 0 auto;
background-color: #333;
background-image: url('../img/chalkboard1.png');
background-position: center;
background-size: cover;
}
.feature-images {
width: 900px;
margin: 0 auto;
}
.live {
width: 125px;
height: 125px;
padding-bottom: 5px;
margin: 140px 70px 0 70px;
border-bottom: 3px solid #fff;
}
.offer {
width: 125px;
height: 125px;
padding-bottom: 5px;
margin: 0 70px 0 100px;
border-bottom: 3px solid #fff;
}
.share {
width: 125px;
height: 125px;
padding-bottom: 5px;
margin: 0 70px 0 130px;
border-bottom: 3px solid #fff;
}
.search-description,
.offer-description,
.share-description {
font-size: 1.25em;
width: 650px;
margin: 25px 0 0 400px;
}
.download {
width: 650px;
margin: 30px 0 0 400px;
}
/************************************/
.googleplay {
padding: 50px 0 0 540px;
}
.appstore {
padding: 45px 0 0 50px;
}
/************************************
FOOTER
************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #333;
}
.social-icon {
width: 20px;
height:20px;
margin: 0 5px;
}
#copy {
font-size: 1em;
color: #333;
}
/************************************
COLOURS
************************************/
/* site body */
body {
background-color: #fff;
}
/* red-orange header */
header {
background-color: #ff3f34;
border-color: #333333;
}
nav {
background: #ff3f34;
}
/* links */
a {
color: #fff ;
}
p {
color: #fff;
}
li {
color: #fff;
}
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #333333;
}
/************************************
MEDIA QUERIES
************************************/
@media (max-width: 598px) {
.chalkboard {
width: 100%;
height: 807px;
margin: 0 auto;
background-color: #333;
background-image: url('../img/chalkboard1.png');
background-position: center;
background-size: cover;
}
}
@media (max-width: 740px) {
header {
float: none;
margin: 0;
width: 100%;
height: 30%;
}
#logo {
float: none;
display: block;
width: 189px;
height: 37px;
margin: 0 auto;
}
nav {
text-align: center;
padding: 10px;
margin: 0;
}
nav ul {
list-style: none;
margin: 5px auto;
padding: 0;
}
nav li {
display: block;
}
nav a {
font-weight: 700;
}
.chalkboard {
width: 100%;
margin: 0;
background-color: #333;
background-image: url('../img/chalkboard1.png');
background-position: center;
background-size: cover;
}
.feature-images {
min-width: 100%;
padding-top: 100px;
margin: 0 auto;
}
.live {
width: 85px;
height: 85px;
padding-bottom: 5px;
margin: 0 70px 0 70px;
border-bottom: 3px solid #fff;
display: inline-block;
}
.offer {
width: 85px;
height: 85px;
padding-bottom: 5px;
margin: 0;
border-bottom: 3px solid #fff;
display: inline-block;
}
.share {
width: 85px;
height: 85px;
padding-bottom: 5px;
margin: 0 70px 0 60px;
border-bottom: 3px solid #fff;
display: inline-block;
}
.search-description,
.offer-description,
.share-description {
font-size: 1.25em;
width: 300px;
padding: 10px;
margin: 0 auto;
}
.download {
width: 400px;
padding: 0 30px;
margin: 0 auto;
}
.googleplay {
padding: 50px 0 0 130px;
}
.appstore {
padding: 45px 0 0 50px;
}
}
@media (min-width: 741px) and (max-width: 1363px) {
.offer {
width: 125px;
height: 125px;
padding-bottom: 5px;
margin: 0 70px 0 70px;
border-bottom: 3px solid #fff;
}
.share {
width: 125px;
height: 125px;
padding-bottom: 5px;
margin: 0 0 0 60px;
border-bottom: 3px solid #fff;
}
}
Roland Hagan
6,443 PointsThe CSS element is .chalkboard.
Steingrímur F. Stefánsson
Front End Web Development Techdegree Graduate 33,699 PointsHere is how I usually do this and I do not need to add this inside media queries.
.chalkboard {
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
position: relative;
}
I prefer to have the images separated so I have an option of adding different images to different sections of the page
.chalkboard-img-1 {
background-image: url("../img/chalkboard1.png");
}
Steingrímur F. Stefánsson
Front End Web Development Techdegree Graduate 33,699 PointsSteingrímur F. Stefánsson
Front End Web Development Techdegree Graduate 33,699 PointsHi Roland.
Are you talking about the background image in css?
Can you provide a link to this page?
Cheers :)