Background images: how to fill whole div if image is small and vice versa

Question

I have three problems:

1. When I tried to use a background image in a smaller size div, the div shows only part of image. How can I show the full or a specific part of image?

2. I have a smaller image and I want to use in a bigger div. But don't want to use repeat function.

3. Is there any way in CSS to manipulate the opacity of an image?

Solution 1

Resize the image to fit the div size.
With CSS3 you can do this:

/* with CSS 3 */
#yourdiv {  
    background: url('bgimage.jpg') no-repeat;
    background-size: 100%;
}

How Do you Stretch a Background Image in a Web Page:

About opacity

#yourdiv {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

Or look at CSS Image Opacity / Transparency

Solution 2

To automatically enlarge the image and cover the entire div section without leaving any part of it unfilled, use:

background-size: cover;

Solution 3

This worked perfectly for me

background-repeat: no-repeat;
background-size: 100% 100%;

Solution 4

Try below code segment, I've tried it myself before :

#your-div {
    background: url("your-image-link") no-repeat;
    background-size: cover;
    background-clip: border-box;
}

Solution 5

Rather than giving background-size:100%;
We can give background-size:contain;
Check out this for different options avaliable: http://www.css3.info/preview/background-size/

View more solutions

Comments

[Aakash Sahai]

but this will create burden over server to load multiple images(which is similar,as v know)..so instead using multiple images,using one image and strechg n collasping is a better way..but dnt know how to it..

[Sondre]

Point 1 and 2 isn't solutions to this problem. First point is for keeping aspect-ratio on a picture, second point don't seem to work at all. With CSS3 the background-size property will fix this problem, until then you gotta stick with some hack I guess..

[Bazzz]

err, formatting of my post didn't work? I used the toolbar icon... :(

[Aakash Sahai]

i tried it earlier and nw also..if image size is 100px 100px and div has 400px 400px size then it is fixed at the top corner.itz not strechg..background-size not working too..using ie8, firefox,chrome,safari latest browsers

[Bazzz]

Here is an example: jsfiddle.net/9mawE/1 The div is 150px wide. The Google logo is more than 150px wide but is scaled down to fit in the div. The Google Earth icon is less than 150px wide and is scaled up to fit the 150px wide div, Background-size doesn't work in IE 8 because it is CSS 3 which is still unsupported.

[KarSho]

IE not support this(bg-size). Wt to do?

[Kevin Brown-Silva]

Welcome to Stack Overflow! While this answer is probably correct and useful, it is preferred if you include some explanation along with it to explain how it helps to solve the problem. This becomes especially useful in the future, if there is a change (possibly unrelated) that causes it to stop working and users need to understand how it once worked.

[Ruslan Abuzant]

Smallest comment on this page and biggest benefit in my case. Thanks

[user1709076]

does not work for me but my div is inside a <th> inside a <tr> inside a <table> . dont know if that is why

[Ouadie]

could you plz create a jsfiddle for your example ? so we can help you out

[Alex Rogachevsky]

Thanks. Was looking specifically for that. Did it years ago and forgot.

[webs]

contain is not covering whole div. So cover seem to be what op is looking for.

[Boris Gafurov]

this one fits background image both width and height, exactly what is needed.