Background repeat do not show image if it cannot be fully displayed

Question

When I repeat the background in CSS, I want to show the image only if it can be fully displayed.

Do I need to set the width in pixels? Or is there a CSS property that will only show the image, if it can be fully displayed?

[ ]

<div align="left" style="padding-left: 30px;">
    <div class="rep_div" style="background:url('file.png'); width:93.5%; display:block;height:3px;"></div>
</div>

Answer 1

I'm not sure what exactly you are trying to achieve, but at face value you will need a JS that measures your div sizes, measures the dimensions of your image and makes a simple comparison, then if the div is the same size or larger than the image sets the background image of the div to the URL image address.

CSS jQuery

/* css */
#container{ ...no image background set here... }

/* js */
var $container = $('#container');
var image = new Image();
image.src = 'path/to/image.jpg';
image.onload = function() {
  if (
    $container.outerWidth() >= this.width &&
    $container.outerHeight() >= this.height
  ) $container.css('background-image': 'url('+image.src+')');
});

, , " ", .

, , :

var $container = $('#container');
var image = new Image();

image.src = 'path/to/image.jpg';

var calculate = function() {
  if (
    $container.outerWidth() >= image.width &&
    $container.outerHeight() >= image.height
  ) {
    $container.css('background-image': 'url('+image.src+')');
  }
  else {
    $container.css('background-image': 'none');
  }
});

image.onload = calculate;
$(window).on('resize', calculate);

Answer 2

, @Arnold. , , , background-size background-repeat, :

<div style="background-image: url('file.png'); background-size: x% y%; background-repeat: repeat-x;">

x y - , . , , ( ), y 100% x , 100%, ( 10, 20, 25, 33,3, 50%). , x, y, 100% .

( , (, ), x 100%, y 100 repeat-y repeat-x.)

, -, , . , , , .