如何使背景图像响应

Question

I admit in the beginning that I am new to UI development and started learning recently. I am developing a website which i similar to InuitLabs.com . When I looked at the source code using view source I am totally lost. Particularly I am interested in knowing

1. How the slider image on the homepage is responsive? Is it through javascript or using pure css.
2. Also I want to know the text moves upwards on scrolling leaving behind the background image intact? How to achieve the same effect.

I know this might be the basic question but I found it hard to know through the source code as there are many javascript and css files.

Regards, Pradeep

Answer 1

Take a look at the background-size property. you can set background-size to any px or % value or use constants: cover will adjust the image size to fill the entire container while contain try to fit the image inside the container without cropping it, most likely leaving some parts of the container without any background.

What you probably want is to set your background-size property to cover.

Answer 2

you just set the image to the percent you want in % through css for example:

.slider img {
   width:100%;
}

edit: also you need to specify the height as auto, if you do not want to lose the image ratio. if you set width and height at 100% the image ratio will be messed up.

Answer 3

if you want to set responsive height also for longer device then use width:100%; and height:100%; other wise you can use height:auto; make div and keep it background-size property for it.