Question

I use this statement to get a background image inside the div tag.

 <div data-role="content" data-theme="a" style= "height:100%; background:url    
('./images/tankanzeige.png') center center no-repeat">  
</div>

I want to have the div be the same size as the image, but it has the wrong size it shows only 20% percent of the image.

What do I have to change?

Answer 1

If you want to resize the div to fit the image:

1. If you know the size of the image then you must set the pixel size of the div – e.g. 100px height and 200px width:

<div data-role="content" data-theme="a" style= "height:100px; width: 200px; background:url('./images/tankanzeige.png') center center no-repeat">  
</div>

That’s because 20% means – “try to take 20% of the parent”.

2. It is much easier to use an image tag <img> inside the div as this will allow the div to expand automatically.

3. If you must use the CSS background image and you don’t know the image size, you need to use JavaScript to get the image size. First you need to create a new Image object.

See this answer: how-to-get-image-size-height-width-using-javascript

and the code from it:

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

Please note, you need the onload event to allow the image to load first.

---

If you want to resize the CSS background to fit the div:

You can use the CSS3 property background-size: 100%;