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 trialMyles Hyson
8,853 PointsHow would I put a different header image on each page? I'm pretty new, can I accomplish that with just css or no?
I would like to put a different header image on each page on my website. What is the best way to do this? Do I need more knowledge than just css and html?
3 Answers
Erik McClintock
45,783 PointsMyles,
There are a number of different ways you can achieve this, depending on how you're building your site. If your site is static, pure HTML/CSS, then you simply put in a unique image on each of your pages. If you're building a dynamic site with something like PHP, you can add variables and dynamically insert different images per page. If you're building a WordPress site, it'll be similar to the PHP example, but potentially even simpler depending on the options you have available and the theme that you choose.
It's all relative!
Erik
Sam Baines
4,315 PointsYes - you should be able to achieve that with just CSS and HTML by giving the header on each html page a different class or individual ID - then just have a different background image for the header associated with each class or ID.
For example have a look at this codepen
Sean May
9,145 PointsIt's certainly doable in just HTML and CSS, but the actual implementation sort of depends on what you want to do. If you want to have a fixed image on each page (like you have a specific picture for your About page, a specific one on your Portfolio page, or whatever), you can give your headers on each page a specific class like
class="about-header"
and then use the
background-img
property in CSS to select those specific classes, then specify the images.
If you need something that like randomly assigns a header picture to a page, you can do it in JavaScript without a whole lot of hassle.