Question

I’m using the jQuery Fullscreen plugin to achieve a full-screen background image which scales dynamically on browser window resize (LINK TO SITE). It has always worked well for me. On this specific project, the background image changes for each link when clicked. This is a single page site which scrolls when a menu-item is clicked using the jQuery ScrollTo plugin.

I’m having a tough time figuring out how to set a minimum background image width. If the browser window gets sufficiently small, the white in the background image interferes with the white text. I want to set a minimum width, such that the background image scales until a certain point, and then stops regardless of how small the window is. My Javascript skills are pretty amateur, and I’ve tried simply using CSS to no avail.

Answer 1

Consider using background-size to zoom background image in conjunction with CSS Media Queries for using different background-size values for different widths of browser window.