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
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsDynamic background image by page
I am trying to do something that I assume will involve Javascript. I am building a personal profile/website. The plan is for three pages, home portfolio, contact. I have a heading (not to be confused with header) area that takes about 40% of the vertical height on each page. This heading area will have a background image (different on each page). The HTML is pretty easy as I will show you. The CSS would be a no brainer if I wasn't trying the change the background image on each page, but I am. Here is what I have with the 'home" page:
HTML
<header class="headContainer">
<img class="imageItem" src="images/doug.png" alt="doug hawkinson">
<h1 class="greetItem">Hello! I’m Doug,</h1>
<h2 class="locationItem">from Greater Seattle, Washington.</h2>
</header>
CSS
.headContainer {
background: url("images/seattleAtSunrise.jpg") no-repeat center center ;
background-size: cover;
width: 100%;
min-height: 350px;
}
This code works great on the home page, but the background image is fixed. I will have that same header code in the portfolio page and the contact page, but the image needs to change. For instance I have identified the image for the contact page to be PikePlaceMarket so the CSS will need to be:
background: url("images/pikePlaceMarket.jpg") no-repeat center center ;
I haven't identified the specific image I want to use for the portfolio page but I will need something like:
background: url("images/?????????.jpg") no-repeat center center ;
I'm pretty sure it will involve javascript but I don't know how to go about it.
Any ideas?
3 Answers
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsYay! Perseverance prevails, and I would not have gotten it without a push in the right direction. Thank you Kevin and Seth. Here is the code that works:
.headContainer {
min-height: 350px;
width: 100%;
}
#home .headContainer {
background: url("images/seattleAtSunrise.jpg") no-repeat center center;
background-size: cover;
}
#folio .headContainer {
background: url("images/elliottBay.jpg") no-repeat center center;
background-size: cover;
}
#contact .headContainer {
background: url("images/pikePlaceMarket.jpg") no-repeat center center;
background-size: cover;
}
Kevin Korte
28,149 PointsI'm assuming that this site is just going to be html, css, and js which is just fine.
You already have all of the elements needed to do this. Since you have already give the body on each page a unique id, we can simply use that id value to tell the css which background image to load, no javascript needed.
What I mean is, lets refactor to this:
.headContainer {
background-size: cover;
width: 100%;
min-height: 350px;
}
and than all we have to do is this
#home .headContainer {
background: url("images/seattleAtSunrise.jpg") no-repeat center center ;
}
#folio .headContainer {
background: url("images/pikePlaceMarket.jpg") no-repeat center center ;
}
#contact .headContainer {
background: url("images/?????????.jpg") no-repeat center center ;
}
And that's all you need.
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsKevin: I responded below.
Seth Kroger
56,416 PointsYou could try using just CSS by selecting the id and header class. Since the tag with the class is inside the tag with the id you can use:
#contact .headContainer {
background: url("images/pikePlaceMarket.jpg") no-repeat center center;
}
which leaves the default image and other formatting intact.
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsSeth: I responded below.
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsDoug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsI forgot to mention I have set the HTML 'body' element to have an id="home" or id="folio" or id="contact". I used that to place specific quotes in the HTML. But I'm not sure how to do the same for CSS.