Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

README.md

picture-background

Converts picture tags into background-image CSS styles. Updates with window resize events, just like <picture> does by default.

Motivation

One solution to help fulfill three needs:

  1. Background cover styling.
  2. Conditional image loading.
  3. Meaningful and accessible HTML markup.

Requirements

  1. Browser support for matchMedia.
  2. jQuery (vanilla support planned).

Installation Options

  • Download .zip from Github.
  • NPM.

Usage

HTML:

<div id="parentOfPicture">
	<picture>
		<source srcset="800x600.png" media="(min-width: 600px)" />
		<img alt="placeholder" src="400x300.png" />
	</picture>
</div>

jQuery:

$('#parentOfPicture').pictureBackground();

Output if window width < 600px:

<div id="parentOfPicture" style="background-image: url("400x300.png");">
	<picture>
		<source srcset="800x600.png" media="(min-width: 600px)" />
		<img alt="placeholder" src="400x300.png" />
	</picture>
</div>

Output otherwise:

<div id="parentOfPicture" style="background-image: url("800x600.png");">
	<picture>
		<source srcset="800x600.png" media="(min-width: 600px)" />
		<img alt="placeholder" src="400x300.png" />
	</picture>
</div>

About

Converts picture tags into background-image CSS styles. Currently running in production environments with great success.

Resources

License

Releases

No releases published
You can’t perform that action at this time.