CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Neox
Neox

Reputation: 87

Background Image with Full Height but responsive Width using Jquery

I have a background image with height 1400 and width 1000 , if i use any full screen background jquery plugin or code it crops from top or bottom and make it fit the whole screen but what i want is a plugin or code which will make sure the background image is responsive based on width of browser yet the full height of background image should be visible with scroll bar. currently it crops height from top and bottom.

if thats not possible atleast the crop should be only from bottom to maintain aspect ratio.

Upvotes: 0

Views: 4483

Answers (1)

ahren
ahren

Reputation: 16961

.background{
  width: 100%;
  height: 100%;
  background-image:url(path/to/image.jpg);
  background-position: top center;
  background-size: cover;
}

This will only crop the bottom off, but make sure the image 'covers' the entire element.

Demo: http://jsfiddle.net/Rkf6Q/

To show 100% height, and have the width cropped, just set the background-size parameter to auto 100%

Demo: http://jsfiddle.net/Rkf6Q/1/

Upvotes: 1

Related Questions