compass functions

36 views
Skip to first unread message

Sohail Hasware

unread,
Mar 14, 2014, 9:28:28 AM3/14/14
to compas...@googlegroups.com
I am quite new to sass and compass. 
I am trying to have a page background that is responsive. I have tried out this solution provided by Perfect Full Background Image. i have opted for the jquery solution.
The solution is:  if the aspect ratio of the image (inline <img> we intend to use as a background) is larger or smaller than the current aspect ratio of the browser window. If it is lower, than we can set only the width to 100% on the image and know it will fill both height and width. If it is higher, we can set only the height to 100% and know that it will fill both the height and width.

HTML
<img src="images/bg.jpg" id="bg" alt="">

CSS
#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

Jquery
$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ( (theWindow.width() / theWindow.height()) < aspectRatio ) { $bg .removeClass() .addClass('bgheight'); } else { $bg .removeClass() .addClass('bgwidth'); } } theWindow.resize(resizeBg).trigger("resize"); });

Is this possible to do with compass using functions or mixins instead of using jquery?

Thanks







Reply all
Reply to author
Forward
0 new messages