jQuery fullscreen minimum background image size

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

考虑结合CSS Media Queries使用background-size来缩放背景图像，以便针对不同宽度的浏览器窗口使用不同的background-size值。