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

CSS

Posted by mrx3
mrx3
8,742 Points

Having some trouble making a full background header responsive. (Codepen Included).

I'm having trouble making my "Boxing Legends" header background-image responsive. I've started to notice that many sites today have background images inside the header, and many of these images are rather large, and they look cool..to me anyway.

Here's a couple links to some site templates with pictures in the header. http://www.freewebtemplates.com/download/free-website-template/solarize-877782571/

And this one, which is my favorite: http://pixelarity.com/frequency I love how the header image blends so well with the color.

For the site I'm making I tried things like making the height a 100%, but that just shrunk the image down, and you could only see the top of Tyson's head. When I changed the height to 60em, and that worked, but now the images is not responsive at all. I tried to add a img tag with a class="responsive-img" right into the header, and style it that way. Again that didn't work at all either. The CSS for my header-img starts on line 8-13 in my codepen.

Can some help with figuring out what I've done wrong? Thank you so much for any answers.

codepen ( http://codepen.io/mike316/pen/Ggbzgz ).

2 Answers

Curtis Schrum
Curtis Schrum
10,174 Points
Curtis Schrum
Curtis Schrum
10,174 Points

To make it responsive I changed the html structure to include the image. I am not a CSS expert (I am a PHP Developer) so I typically put my images inline and then style them on the back end. 

<header>
         <h1>Boxing Legends</h1>
         <div class="header-image"><img src="http://a.espncdn.com/photo/2008/0430/box_g_tyson2_580.jpg"</div>
         <nav>

<?php //And then CSS I did this: ?>

<style>
header {
  width: 100%;
  height: 100%;
}

.header-image {
  width: 100%;
  height: auto;
}

.header-image img {
  width: 100%;
}
</style>

I was not sure if you wanted the Navigation over the image or not if you did just move the <nav> element around where you need it. I hope this helps.

mrx3
mrx3
8,742 Points

Works good so far. Thanks so much.

Curtis Schrum
Curtis Schrum
10,174 Points
Curtis Schrum
Curtis Schrum
10,174 Points

You are wanting to create a parallax background. I am not an expert by any means and honestly the discussion is too large for the scope of a CSS forum question. I looked over your code and I think this site will be helpful to you: http://davidwalsh.name/parallax

David goes through the entire process from start to finish to accomplish what you are after.

mrx3
mrx3
8,742 Points

That's what that's called. Thanks Curtis. I actually would just like to make the background image responsive is there anyway to do that without the "parallax?" Thanks for the reply.