Big background images have been quite a trendy thing in web design. You can easily spot one in Awwwards website. It's a design trend that suits all kind of websites such as landing page, portfolios, company websites.
However, it's quite a tricky thing to handle when large image and responsive come altogether. Some part of the image might get hidden as the screen size shrink into smaller viewport. Here we have a pretty nifty jQuery plugin called Responsify.js solves this issue.
Responsify.js is smart enough to keep the focus on the right area of the image. So, whenever the browser is resize, it will continue to focus on the area you've defined. If you don't know how to set it, it has an app to let you do it easily. It does the following:
- It allows you define a focus area on an image using data-focus-xxx tag
- It takes in the focus area data from the image, calcuate the image's container's size, resize and position the image accordingly, make sure the focus area is always in view and in the best position possible.
SPECIFICATIONS & DOWNLOAD
- Official Website / Demo / Download
- Plugin Category: Layout
- Requirement: jQuery Library
- Compatibility: Modern Browsers
- License: MIT License
Comments will be moderated and
rel="nofollow"will be added to all links. You can wrap your coding with[code][/code]to make use of built-in syntax highlighter.