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

Tobias Bergdahl
Tobias Bergdahl
7,046 Points
Posted by Tobias Bergdahl
Tobias Bergdahl
7,046 Points

Background resize with viewport?

Hi!

Maybe a simple question for you guys and girls.

What I want is this. http://nickdimatteo.com A header section that resizes the background with the viewport and keeps the div with the content horizontally centered.

I have looked at the code but I don't get it. And why do you see style="height: 638px" inside of the div and not in the css?

<div id="intro" style="height: 638px">

Thanks for the help.

5 Answers

Felix Yakubov
Felix Yakubov
17,475 Points
Felix Yakubov
Felix Yakubov
17,475 Points

First of all the viewport works different than you describe. Lets say your window size is 100cm so the viewport is 1% of that => 1vw = 1cm. You cant write height:100%vw; Two great links on the topic: http://css-tricks.com/viewport-sized-typography/ http://lab.maltewassermann.com/viewport-resizer/

But for what your trying to do I don't think vw is smart solution. Rather you should use background-image / background-size properties. The blog you sent me is using the cubic-bezier transition property but also they use YUI framework properties (probably JS included) which I dont quite understand from the inspection for that sudden change.

I will give you 4 options you can try and play with and see what suits your style: Fixed background, cover, contain and percent size. Each one is working different on background images. Also check out this page: http://css-tricks.com/perfect-full-page-background-image/

div {
  background-attachment: fixed;
  background-repeat: no-repeat;
}

div {
 background:no-repeat;
  -webkit-background-size: 100% 100% ;
  -moz-background-size: 100% 100% ;
  -o-background-size: 100% 100% ;
  background-size: 100% 100% ;
}

div {
  -webkit-background-size: cover  ;
  -moz-background-size: cover  ;
  -o-background-size: cover  ;
  background-size: cover  ;
}

div {
 background:no-repeat;
  -webkit-background-size: contain ;
  -moz-background-size: contain ;
  -o-background-size: contain ;
  background-size: contain ;
}

nickdimatteo.com is using basic @media queries for window sizes: for large screens, tablets and mobile. Nothing difficult in that.

Can you send me your website url to see why you dont get 100% height?

Felix Yakubov
Felix Yakubov
17,475 Points
Felix Yakubov
Felix Yakubov
17,475 Points

Can you specify more? I think i can help you but i dont understand what on that website you want

When you inspect elements some css code would be shown inside elements, when they change with the screen

Tobias Bergdahl
Tobias Bergdahl
7,046 Points
Tobias Bergdahl
Tobias Bergdahl
7,046 Points

Hi! And thanks for helping me. I want a div (with a background-color or background -image) to change size to the window/viewport. So it can covers the viewport 100% height. I set height to 100% but nothing happens.

Basically I want to do like this website http://blog.squarespace.com/. On mobile you have the header div span the width, but in bigger screen sizes it changes to span the 100% in height and 50% of the width. With media queries I get it to change from horisontal to vertical position but I dont get it to be 100% in height.

Make any sense?

Tobias Bergdahl
Tobias Bergdahl
7,046 Points
Tobias Bergdahl
Tobias Bergdahl
7,046 Points

Wow, thank a million. I´m gona check this out.

My new site only local on my computer for the moment. It will be up around 2019 I guess :) My present (old) site is only a simple wordpress site. www.tobiasbergdahl.com but the goal is to build a new one by myself.

Thanks again!

Felix Yakubov
Felix Yakubov
17,475 Points
Felix Yakubov
Felix Yakubov
17,475 Points

All those website you have there are your designs?

Tobias Bergdahl
Tobias Bergdahl
7,046 Points
Tobias Bergdahl
Tobias Bergdahl
7,046 Points

Yes, these are the design I have made as a digital designer at DDB in Stockholm. But only psd-design. I havent done any development, but I´m trying to change that. To become a god web designer I think you need to be able to do some development to. I have been stuck to photoshop to long...

Felix Yakubov
Felix Yakubov
17,475 Points
Felix Yakubov
Felix Yakubov
17,475 Points

I really like those, I think you could become great web developer because you have the design touch. I find myself struggling with putting "on paper" what I have on my mind, because I don't control the Photoshop.

http://css3ps.com/ - great tool by the way.

Tobias Bergdahl
Tobias Bergdahl
7,046 Points
Tobias Bergdahl
Tobias Bergdahl
7,046 Points

Thanks :) Design isn't easy but I think its more direct and it´s "easer" than code to fix if there is some problems. With code you can be stuck and have no idea why shit isn't moving...