CODEWITHSUNDEEP
javascripthtmlcss
Allan Marcel
Allan Marcel

Reputation: 1

Filling window Background

I'm trying to put a picture on my background and my idea is that image fills the entire window, no matter what size it is.

I'm using html, css and script below:

// Funcao adaptImage()
// Parametros: targetimg 
function adaptImage(targetimg) {
  var wheight = $(window).height();
  var wwidth = $(window).width();


  targetimg.removeAttr("width")
  .removeAttr("height")
  .css({ width: "", height: "" });

  var imgwidth = targetimg.width();
  var imgheight = targetimg.height();

  var destwidth = wwidth;
  var destheight = wheight;


  if(imgheight < wheight) {


    destwidth = (imgwidth * wheight)/imgheight;

    $('#fundo img').height(destheight);
    $('#fundo img').width(destwidth);
  }




  destheight = $('#fundo img').height();
  var posy = (destheight/2 - wheight/2);
  var posx = (destwidth/2 - wwidth/2);


  if(posy > 0) {
    posy *= -1;
  }
  if(posx > 0) {
    posx *= -1;
  }


  $('#fundo').css({'top': posy + 'px', 'left': posx + 'px'});
}


$(window).resize(function() {
  adaptImage($('#fundo img'));
});


$(window).load(function() {
  $(window).resize();
});
#fundo-externo {
  overflow: hidden; 
  width: 100%;
  height: 100%;
  position: relative; 
}

#fundo {
  position: fixed; 
  width: 100%;
  height: 100%;
}

#fundo img {
  width: 100%; 
  position: absolute;
}

#site {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 560px;
  padding: 20px;
  margin-left: -300px; 
  background: #FFF; 
  background: rgba(255,255,255,0.8); 
}
<body>
  <div id="fundo-externo">
    <div id="fundo">
      <img src="http://placehold.it/1920x1080" alt="" />
    </div>
  </div>
</body>

My problem is in some devices, the background does not fill completely , it appears a white list below.

Any ideas would help Many thanks

Upvotes: 0

Views: 44

Answers (2)

Johannes
Johannes

Reputation: 67778

don't use an <img> tag, but use the image as background image for your body:

body {
  background: url('http://placehold.it/1920x1080') no-repeat;
  background-position: fixed;
  background-size:cover;
}

Upvotes: 0

ScaisEdge
ScaisEdge

Reputation: 133380

Use this setting for your background image

.for_background_img  {
  background-size: cover; 
  background-size: 100%;
  background-repeat: no-repeat;  
   height: 100%;
}

Upvotes: 2

Related Questions