Is it possible to somehow make the background image in the div div be rubber, the proportions in percent do not work?

    6 answers 6

    Dedicated to normal people!

    Receive css3:

    div { width:1500px; heigth:200px; background-image: url(/bg.jpg); background-size:cover; -moz-background-size:cover; -webkit-background-size:cover; }

    What will happen?

    The browser will stuff an image of arbitrarily gigantic size into such a narrow-wide block (of course, as a substrate), the browser will also stretch and scale even a single-pixel image to the size of a block.

    EXPLANATION:

    The first 2 attributes set the block size in width = 1500 pixels and height = 200 pixels, the third attribute-address of the image, the fourth, fifth and sixth attributes-scale the image by div size for "w3c-browsers", for Firefox and Webkit browsers like Google Chrome, Apple Safari respectively.

    • I would suggest a different order of rules, namely: div {width: 1500px; heigth: 200px; background-image: url (/bg.jpg); -moz-background-size: cover; -webkit-background-size: cover; background-size: cover; } So safer. - Astor

    It is possible, but it refers to css3, and not all browsers understand this.
    background-size .

    To make the image rubbery, place the image under the content:

     <div style="height:400px;width:70%;overflow:hidden;position:relative"> <img src="img.jpg" alt="" style="position:absolute;left:0;top:0;width:100%;height:100%" /> <div style="position:absolute;left:0;top:0;z-index:1;width:100%;height:100%">content</div> </div>

      If you already use the image as a background, then the best background-size:contain

      • 2
        What don't you like? This is the answer! - sercxjo
      • @Alex: if you think the answer is bad - put a minus. - Nick Volynkin ♦
      • @NickVolynkin for us is more a comment than an answer. just like the answers below. - Alex
      • @Alex: OK, I get it. - Nick Volynkin ♦
       background-repeat: no-repeat;

      ? Or what do you mean by rubber?

        Normal people make either an image that can be "repeated" n times on a substrate, or get user interface parameters with javascripts, or they put a div on it as a substrate and have a picture in it.

          It is necessary either to cut the image so that it can pave the entire container area, or immediately make a large image (for example, 1920 px) wide based on the maximum resolution supported by the PC monitors, and even better not to make rubber images because you do not know what resolution user