https://github.com/zeshanshani/jquery-convert-to-background

Convert an image into the background image while keeping the normal image tag in place for SEO purpose.
https://github.com/zeshanshani/jquery-convert-to-background

backgroundimage images imagetobackground jquery jquery-plugin

Last synced: 3 days ago
JSON representation

Convert an image into the background image while keeping the normal image tag in place for SEO purpose.

• Host: GitHub
• URL: https://github.com/zeshanshani/jquery-convert-to-background
• Owner: zeshanshani
• License: mit
• Created: 2019-03-10T10:58:52.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-03-10T12:35:31.000Z (over 5 years ago)
• Last Synced: 2024-09-22T08:17:06.450Z (about 2 months ago)
• Topics: backgroundimage, images, imagetobackground, jquery, jquery-plugin
• Language: HTML
• Size: 11.7 KB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Convert To Background

This jQuery plugin takes the very first image of an element and convert it into the background image. This also keeps the normal image tag in place for SEO purposes.

It works best in situations when you want to have a square image but the image's size itself is not square. So this plugin will convert it into the background image and apply it to the targeted element and then make sure the image remains square all the time.

View Demo

## Options

* `size`: set the image background size. *default is `cover`*

* `responsive`: set to 'true' if you want the element to resize as a normal image on responsive devices. *default is `false`*

* `position`: set the image background position. *default is `center center`*

* `width`: set a custom width of the box, applies on the container. *default is blank,*

* `height`: set a custom height of the box, applies on the container. *default is blank*

* `repeat`: set the image background repeat. *default is `no-repeat`*

* `attachment`: set the image background attachment. *default is blank*

* `fallbackSrc`: set a fallback image URL. *default is blank*

Following properties are all CSS properties so you can use same values as in CSS: `size` `position` `width` `height` `repeat` `attachment`

## Downlaod

### Via NPM

Download this plugin using this NPM commend.

```

npm i jquery-convert-to-background

```

### Regular

Simply close this repository or download it as zip. After that, include the `jquery.convertToBackground.js` file in the head or footer of your HTML page.

``` HTML

```

You can also use the minified version, which is: `jquery.convertToBackground.min.js`

## Usage

``` JS

$('.element-that-has-img').convertToBackground({

  // size: 'cover',

  // responsive: false,

  // position: 'center center',

  width: 300,

  height: 200,

  // repeat: 'no-repeat',

  // attachment: '',

  // fallbackSrc: '',

});

```