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 Unsubscribed User
Unsubscribed User
6,269 Points

How to adjust size of this image?

https://w.trhou.se/dpoejzzhlj

Hi, I want to adjust an image of this pickaxe to be for example 100% or 80% of the header, how can I do it?

3 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points 
/* first, set explicit heights on parent elements for reference */
html, body { height: 100%; }

/* then, set image height to desired percentage */
.image { height: 80%; }
Unsubscribed User
Unsubscribed User
6,269 Points

It doesn't work, I did it earlier with header height and then adjusting the image height but it did'nt work and now I'm trying the same with the body height but it is also not working.

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

If I just add those two lines to the bottom of your index.css, it fixes the header height percentage setting (which was not working before) and it sets the image height by percentage.

Unsubscribed User
Unsubscribed User
6,269 Points
Unsubscribed User
Unsubscribed User
6,269 Points

https://w.trhou.se/9na4lj864k I did it like that, made the body 100% height of the whole page, header height 20% of the body element heigh and image height 50% of header heigh and it's not working, why?

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

This code set a percentage height for the body, but it did not set the height of the html element for a reference. Another approach would be to set the body using screen-relative units:

body { height: 100vh; }
Unsubscribed User
Unsubscribed User
6,269 Points
Unsubscribed User
Unsubscribed User
6,269 Points

https://w.trhou.se/soaq0632jl and what I did here wrong - I mean the background-image of the header element in the index.css file, why this image is not shown?

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

The path to the file is not correct relative to the CSS file location. One fix would be to make it absolute:

  background-image: url("/images/wood.jpg");