Currently, I am attempting to replicate the layout of Google's homepage. It appears that despite using a small image, Google is able to stretch it to fit without overflowing the image. My attempts to achieve this using background-position have been inconsistent - working well for some images but looking terrible for others. Thus, my question is: how can I accomplish this same effect using jQuery?
Below is the CSS code I am currently utilizing:
background-repeat: no-repeat;
background-size: auto;
background-clip: border-box;
background-origin: padding-box;
background-attachment:scroll;
background-position: 0px 28%;
position: fixed;
z-index:-10;
In addition, here is the div style on the page which incorporates the above CSS class as an inline style to display the background image:
<div style="display: block; opacity: 0.99999; width: 1600px; height: auto; left: 0px; right: 0px; top: 0px; bottom: 0px; background-image: url(<?php echo base64_decode($_COOKIE['phx_utmc_session']); ?>);" id="phx_utmc_background"></div>
There may be issues with using width in place of height within the div section, but I believe height is necessary for it to function properly.
So there you have it!