Last active
August 29, 2015 13:57
-
-
Save stephenscaff/9833232 to your computer and use it in GitHub Desktop.
Turn img to a background-image of it's parent div. Great for accessing the proportional cropping of bgs while still droppin some meaningful markup.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //Parent div | |
| $('.js-tobg').each(function() { | |
| //Hunt down img in parent div and snag its src | |
| var imageUrl = $(this).find('img').attr('src'); | |
| //Now add inline style with backgroud-image to div | |
| $(this).css('background-image', 'url(' + imageUrl + ')'); | |
| //Maybe cover the badboy? | |
| $(this).css('background-size', 'cover'); | |
| //Visually hide the img tag if you want the div to maintain aspect ratio | |
| $(this).children("img").css("visibility", "hidden"); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment