How to set image width and height 100% with CSS?

Question

My code:

background:url(images/menu_edu.jpg) no-repeat;

But only half of the image is getting displayed.

Answer 1

The element which has the background needs to be the size of the image.

ie flower.jpg = 255px x 55px

<div class="flower">
    Some text
</div>

.flower {
    background: url(flower.jpg) no-repeat;
    width: 255px;
    height: 55px;
}

The size of the element cannot be set to the dimensions of the image if you're using a background. You could use javascript to calculate the dimensions though.

Or if you need to repeat the image, you can use repeat, repeat-x or repeat-y on the background tag instead.

Answer 2

You are not showing enough code, but if the background image is in the body element, it is probably not stretching across the whole viewport.

Try

html, body { min-height: 100% }

Answer 3

如果您只想显示图像，IMG标签将更加有用和有效……（并且可以将其设置为width（/＆）height = 100％）。

Answer 4

If you want to display your image in full size, no need to use CSS for this

Dont give height and width attribute to the <img> tag like <img src="this.jpg" /> it will display in full size

But if you want your <div> to show its background in full size, then is no other option than assigning the exact image dimensions