Background image 100%

Question

I always had this curiosity, how to leave the background image 100% according to the monitor ( We all know that there are several measures). So I was told that it would be a script in JS or jQuery, I don’t remember very well, and it worked as follows:

You create several images with the following measurements:

1024x768-
1280x768-
1360x768-
1366x768-

These are resolutions from my laptop, they might have other measures.

When you access the site, this script reads the measure and loads such an image. is that the way it works? I would be able to do it in CSS?

Example on a website : http://www.adobe.com/br/products/dreamweaver.html

Answer 1

^{There are several techniques for getting an image to occupy the full width and height of the screen. Each technique is considered suitable for a particular scenario because we can handle the problem via Javascript, CSS or on the server side.}

^{In this answer the solutions make use of Javascript with jQuery.}

jQuery

Image according to screen width

This Plugin works the way you indicate in the question, IE, it makes use of several images loading the most suitable depending on the width of the screen:

(function() {

var win = $(window);

win.resize(function() {

    var win_w = win.width(),
        win_h = win.height(),
        $bg    = $("#bg");

    // Carregar imagem de fundo mais estreita com base na
    // largura do ecrã, mas nunca carregar nada mais estreito
    // do que o que já está carregado, se alguma coisa estiver.
    var available = [
      1024, 1280, 1366,
      1400, 1680, 1920,
      2560, 3840, 4860
    ];

    var current = $bg.attr('src').match(/([0-9]+)/) ? RegExp.$1 : null;

    if (!current || ((current < win_w) && (current < available[available.length - 1]))) {

      var chosen = available[available.length - 1];

      for (var i=0; i<available.length; i++) {
        if (available[i] >= win_w) {
          chosen = available[i];
          break;
        }
      }

      // Definir a nova imagem
      $bg.attr('src', '/img/bg/' + chosen + '.jpg');

      // para testar...
      // console.log('Chosen background: ' + chosen);

    }

    // Determinar se a largura ou a altura deve ser de 100%
    if ((win_w / win_h) < ($bg.width() / $bg.height())) {
      $bg.css({height: '100%', width: 'auto'});
    } else {
      $bg.css({width: '100%', height: 'auto'});
    }

  }).resize();

})(jQuery);

Code taken from the CSS-Tricks website in this article:

Perfect Full Page Background Image | CSS-Tricks

---

Vegas Background jQuery Plugin

Very easy to use, allows us to transform a simple <img/> an image occupying 100% X 100% of the screen, and specify the image on the screen Plugin:

1. Include the Script after the inclusion of jQuery:

   <script type="text/javascript" src="/vegas/jquery.vegas.js"></script>
   

2. Include the CSS:

   <link rel="stylesheet" type="text/css" href="/vegas/jquery.vegas.css" />
   

3. Start the Plugin:

   $(function() {
     $.vegas({
       src:'/images/background.jpg'
     });
   });
   

   Vegas - Demo

Answer 2

You can do this with CSS as follows: http://jsfiddle.net/ez7eq1Lm/

#banner{
    background:url('https://dq197.infusionsoft.com/Download?Id=2300') no-repeat;
    background-size:contain;
    width:100%;
    height:260px;
}

The value contain ^(English) on the property background-size allows:

This keyword specifies that the background image should be sized to be as large as possible, while ensuring that its dimensions are smaller or equal to the corresponding dimensions of the background positioning area.

Answer 3

You can do it for the CSS like this:

body {
    background: url(caminho_para_a_imagem);
    background-size: cover;
}

cover: Resize the image to completely fill the background area while maintaining the ratio.

If you don’t mind the ratio, you can use:

body {
    background: url(caminho_para_a_imagem);
    background-size: 100% 100%;
}

There are other parameters, choose the one that best suits your needs.