CODEWITHSUNDEEP
htmlcssresponsive-design
zilcuanu
zilcuanu

Reputation: 3715

How to make the background image responsive

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

Upvotes: 0

Views: 166

Answers (3)

Anup
Anup

Reputation: 3353

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.

Upvotes: 0

Eugen Timm
Eugen Timm

Reputation: 744

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.

Upvotes: 4

user2211216
user2211216

Reputation: 375

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.

Upvotes: 1

Related Questions