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
Shann Bossaller
1,787 PointsMedia Queries and Header Image Swap
Hi!
I’m a relatively inexperienced developer and I’m trying to improve. I have 3 separate header/banner images I’m trying to switch out depending on the viewport using media queries but am having trouble making it work. It’s very possible I’m overlooking something very basic.
The images are located in an “img” folder within the primary project folder holding everything. Here are the image sizes:
Small (MB2.png)
Height: 65px
Width: 260px
Medium (TB2.png)
Height: 125px
Width: 500px
Large (B2.png)
Height: 200px
Width: 800px
HTML
<header>
<img class="Himg" img src="img/MB2.png" alt="image"/>
</header>
CSS
.Himg {
content: url(“img/MB2.png”);
}
Fluid CSS
@media screen and (min-width: 480px) {
.Himg {
content: url("img/TB2.png");
}
}
@media screen and (min-width: 725px) {
.Himg {
content: url(“img/B2.png”);
}
}
I would really love to get this to work and to learn something in the process. Thank you so much for your time!
5 Answers
Shann Bossaller
1,787 PointsIssue solved. There is probably a better solution, but this is working great for my purpose:
<header> <div class=”smallHeader”> <img src="img/MB2.png" alt="Mobile Image"/> </div>
<div class=”mediumHeader”> <img src="img/TB2.png" alt="Tablet Image"/> </div>
<div class=”bigHeader”>
<img src="img/B2.png" alt="Desktop Image"/>
</div>
</header>
CSS Styling
Main CSS
.smallHeader { background-image: url (“img/MB2.png”); display: block;
} .mediumHeader { background-image: url (“img/TB2.png”); display: none; } .bigHeader { background-image: url (“img/B2.png”); display: none; } Fluid CSS
@media screen and (min-width: 480px) { .smallHeader { background-image: url (“img/MB2.png”); display: none;
} .mediumHeader { background-image: url (“img/TB2.png”); display: block; } .bigHeader { background-image: url (“img/B2.png”); display: none; }
}
@media screen and (min-width: 700px) { .smallHeader { background-image: url (“img/MB2.png”); display: none;
} .mediumHeader { background-image: url (“img/TB2.png”); display: none; } .bigHeader { background-image: url (“img/B2.png”); display: block; }
}
Thanks again everyone!
Cindy Lea
Courses Plus Student 6,497 PointsIm not sure why you used content, were you trying to add an image? If so, try something like this. Dont forget about the no-repeat....
background-image: url(http://www.example.com/bck.png);
Steven Parker
231,269 PointsThe content property is only used with pseudo-classes like ::before and ::after.
You might try removing the <img> element and using header::before as the CSS selector.
Shann Bossaller
1,787 PointsCindy, I am an admitted imbecile in this arena, but, I saw another reference which used "content" and was trying it. :^) Yes, I am totally trying to add an image and change it (switch it out) once certain width thresholds are crossed, hence the media queries.
Shann Bossaller
1,787 PointsBased on Cindy's feedback, this is the code I've tried, to no avail. I'm sure I'm missing somethign basic:
HTML Code I’ve been trying
<header>
<img class="Himg" img src="img/MB2.png" alt="image"/>
</header>
CSS (primary CSS doc)
.Himg {
background-image: url(“img/MB2.png”);
}
Fluid CSS (controls media query changes)
@media screen and (min-width: 480px) {
.Himg {
background-image: url ("img/TB2.png");
} }
@media screen and (min-width: 725px) {
.Himg {
background-image: url (“img/B2.png”);
} }