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!

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

Owen Boochever
Owen Boochever
14,582 Points
Posted by Owen Boochever
Owen Boochever
14,582 Points

Get image to refocus with browser width adjustments

Hi all!

I'm making a site for myself, stumbled on this one: http://www.katiekirsch.com/

.... and love how the background image refocuses as you adjust your browser width. Try it, it's awesome.

Is this a CSS trick or JavaScript? Any thoughts on how I could do something similar with an image? I'm having trouble piecing through her code because her site was made in SquareSpace.

... Also, should I include my background image in HTML, or as a CSS background to achieve this effect?

Thank you thank you.

1 Answer

Damon Foster
Damon Foster
8,418 Points
Damon Foster
Damon Foster
8,418 Points

Hi,

My first answer on here so :)

The code they are currently using on this site is through CSS, although their is a way to do this with JavaScript and people prefer to use this to separate behavioural effects from the page, CSS properties are much better and are faster to load.

transition: all .24s cubic-bezier(.55,.085,.68,.53); -webkit-transition: all .24s cubic-bezier(.55,.085,.68,.53);

This is not supported in all types of browsers so you may need to check prefixes for transition. Read more on http://www.w3schools.com/css/css3_transitions.asp about this CSS property.

You should hit F12 in browsers and inspect the code to learn more about sites.