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

My code:

开发者_如何学Cbackground:url(images/menu_edu.jpg) no-repeat;

But only half of the image is getting displayed.

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

i.e. 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.

If you just want to display an image, the IMG-tag is much more useful and effective... (and it could be set to width(/&)height = 100%).

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

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% }