CODEWITHSUNDEEP
htmlcss
mina
mina

Reputation: 1

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

My code:

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

But only half of the image is getting displayed.

Upvotes: 0

Views: 7080

Answers (4)

Pekka
Pekka

Reputation: 449783

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

Upvotes: 0

Starx
Starx

Reputation: 79039

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

Upvotes: 0

fb55
fb55

Reputation: 1227

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%).

Upvotes: 0

Marko
Marko

Reputation: 72230

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.

Upvotes: 4

Related Questions