CSS3 : Give height and width to background image

Question

I want to give background size as 636px and 1140px to background image instead of div. as I don't want the scroll of div because of its height.

If I give height and width to the parent div then I get background-image but when i give to background-size then it doesn't work.

 .custom_app_phone_div { margin: 5% auto 0 auto; height:auto; width:auto; } .custom_app_phone_div .custom_app_phone_bg_image_div { background: url("http://i.imgur.com/jIE5Bf7.png") no-repeat; background-position-x: center; background-size:636px 1140px;; width: 100%; height: 100%; padding: 10px; } 

 <div class="custom_app_phone_div"> <div class="custom_app_phone_bg_image_div"> </div> </div> 

Any help would be great.

Thank you.

Answer 1

If not defined the div's height will be determined by the content's height.

What you could do is set the min-heigh property.

Answer 2

Set the size of background images to 636px x 1140px using any image editor and then use:

background: url("http://i.imgur.com/jIE5Bf7.png") center no-repeat;

Working fiddle here

Answer 3

I'm not sure what you are asking for. But if you want to change the background image size without changing the div size you should either use an image <img/> or use a helper div as background (see example below).

Now, if you want to get rid of the scrolling bar you can set the parent container .custom_app_phone_div a height/width and set overflow: hidden .

Can you try this and let us know if this works for you?

 .custom_app_phone_div { margin: 5% auto 0 auto; height:auto; width:auto; } .custom_app_phone_div .bgHelper{ background: url("http://i.imgur.com/jIE5Bf7.png") no-repeat; background-position-x: center; background-size: contain; height: 1140px; width: 636px; } .custom_app_phone_div .custom_app_phone_bg_image_div { } 

 <div class="custom_app_phone_div"> <div class="bgHelper"></div> <div class="custom_app_phone_bg_image_div"> </div> </div>