JSFiddle - React, Tailwind, and code Playground

by rodrigonery

HTML

<div class="background-wrapper bg-1">
    <div class="container">
      content
    </div>
    
    <div id="background"><img src="http://www.kony2012.com/images/mainContent-register-kony.jpg" alt="" /></div>
</div>

<div class="background-wrapper bg-2">
    <div class="container">
      content
    </div>
    <div id="background"><img src="http://www.kony2012.com/images/mainContent-film.jpg" alt="" /></div>
</div>

CSS

.bg-1
{
    height: 699px;
}

.bg-2
{
    height: 1200px;
}

.bg-1 #background
{
    min-width: 1400px;
    min-height: 699px;
}

.bg-2 #background
{
    min-width: 1399px;
    min-height: 1359px;
}

.background-wrapper
{
    overflow: hidden;
    position: relative;
}

#background
{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 50%;
}

#background img
{
    width: 100%;
}

.container
{
    color: #FFF;
}

JavaScript

;(function($, window, document, undefined){    
    "use strict";
    $.fn.background = function(){
        
        var back = $('.background-wrapper');
        var wind = $(window);
       
        back.find('#background').each(function(){
            
        var $this = $(this); 
        var $wind = $(window);
            
            if($wind.width() > parseInt($this.css('min-width'))){
                $this.css({ 'width': '100%' });
            }else{
                $this.css({ 'width': $this.css('min-width') });
            }
        
            $this.css({ 'margin-left': -($this.width() / 2) + 'px' });
            
            return $this;
        });
   
    wind.resize(function(){
        $.fn.background();
    });
    
    }
})(jQuery, window, document);

$(function(){
    $().background();
});