https://github.com/quantity-digital/vue-bg-src

Vue directive to make responsive image backgrounds similar to using srcset on image tags.
https://github.com/quantity-digital/vue-bg-src

Last synced: 23 days ago
JSON representation

Vue directive to make responsive image backgrounds similar to using srcset on image tags.

• Host: GitHub
• URL: https://github.com/quantity-digital/vue-bg-src
• Owner: quantity-digital
• Created: 2017-11-20T07:41:29.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-29T09:56:59.000Z (about 7 years ago)
• Last Synced: 2024-08-08T18:38:53.667Z (5 months ago)
• Language: JavaScript
• Size: 132 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-bg-src

Simple Vue.js directive for defining responsive image backgrounds on an element similar to using srcset on an img tag. The background image is replaced based on a predefined set of media queries. 

## Features

- Very simple setup.

- No dependendcies.

- Fallback to low resolution image. 

- Works with IE 10+. 

## Installing

### With a module bundler (webpack, rollup, etc.)

```javascript

npm install vue-bg-src

```

Then initialize the plugin with your media queries

```javascript

// main.js

import VueBgSrc from 'vue-bg-src';

const mediaQueries = {

	md: '(min-width: 500px)',

	lg: '(min-width: 1000px)'

};

Vue.use( VueBgSrc, { mediaQueries: mediaQueries } );

```

### CDN

Include the vue-bg-src script. 

```html

```

Then initialize the plugin.

```javascript

// main.js

const mediaQueries = {

	md: '(min-width: 500px)',

	lg: '(min-width: 1000px)'

};

Vue.use( VueBgSrc, { mediaQueries: mediaQueries } );

```

### Examples

Simply add `v-bg-set` on the element. Use the inline background for your low resolution fallback. 

```html



```


Then add the upscaled version of the image at your breakpoints like this: 

```html



```


**Have fun!**