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

Question

I have three problems:

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?
I have a smaller image and I want to use in a bigger div. But don't want to use repeat function.
Is there any way in CSS to manipulate the opacity of an image?

score 152 · Accepted Answer · edited Jan 12 '16 at 12:55

152

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

edited Jan 12 '16 at 12:55

Zanon

29,231
20
113
126

answered Jan 24 '11 at 07:28

yossi

12,945
28
84
110

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.. – Aakash Sahai Jan 24 '11 at 07:32
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.. – Sondre Jan 24 '11 at 07:50
IE not support this(bg-size). Wt to do? – KarSho Mar 21 '13 at 05:13

score 95 · Answer 2 · edited Feb 10 '14 at 12:06

95

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

background-size: cover;

edited Feb 10 '14 at 12:06

Prashant

25
5

answered Jan 14 '14 at 11:31

Ouadie

13,005
4
52
62

3

Smallest comment on this page and biggest benefit in my case. Thanks – Ruslan Abuzant Mar 10 '16 at 22:55
1

does not work for me but my div is inside a inside a inside a . dont know if that is why
– user1709076 Apr 12 '16 at 20:49
could you plz create a jsfiddle for your example ? so we can help you out – Ouadie Apr 13 '16 at 08:39

score 35 · Answer 3 · answered Oct 05 '17 at 10:27

35

This worked perfectly for me

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

answered Oct 05 '17 at 10:27

Dnyaneshwar Harer

792
7
13

1

this one fits background image both width and height, exactly what is needed. – Boris Gafurov May 09 '19 at 16:51

score 12 · Answer 4 · edited Jun 09 '15 at 00:25

12

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

edited Jun 09 '15 at 00:25

Kevin Brown-Silva

40,873
40
203
237

answered Jun 08 '15 at 19:01

Behnia Esmailian

121
1
5

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. – Kevin Brown-Silva Jun 09 '15 at 00:24

score 8 · Answer 5 · answered Aug 22 '13 at 07:35

8

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/

answered Aug 22 '13 at 07:35

vivekj011

1,129
3
16
23

score 7 · Answer 6 · edited Oct 26 '15 at 11:28

7

This will work like a charm.

background-image:url("http://assets.toptal.io/uploads/blog/category/logo/4/php.png");
background-repeat: no-repeat;
background-size: contain;

edited Oct 26 '15 at 11:28

Community

1
1

answered Apr 15 '15 at 08:39

Jayanta Biswas

71
1
1

Thanks. Was looking specifically for that. Did it years ago and forgot. – Alex Rogachevsky Dec 15 '16 at 01:18
contain is not covering whole div. So cover seem to be what op is looking for. – webs Jan 24 '18 at 10:06

score 0 · Answer 7 · edited Aug 19 '15 at 22:25

0

I agree with yossi's example, stretch the image to fit the div but in a slightly different way (without background-image as this is a little inflexible in css 2.1). Show full image:
```
<div id="yourdiv">
    <img id="theimage" src="image.jpg" alt="" />
</div>

#yourdiv img {
    width:100%;
  /*height will be automatic to remain aspect ratio*/
}
```

Show part of the image using background-position:

#yourdiv 
{
    background-image: url(image.jpg);
    background-repeat: no-repeat;
    background-position: 10px 25px;
}

Same as the first part of (1) the image will scale to the div so bigger or smaller will both work
Same as yossi's.

edited Aug 19 '15 at 22:25

Iharob Al Asimi

52,653
6
59
97

answered Jan 24 '11 at 07:52

Bazzz

26,427
12
52
69

err, formatting of my post didn't work? I used the toolbar icon... :( – Bazzz Jan 24 '11 at 07:55
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 – Aakash Sahai Jan 24 '11 at 08:04
Here is an example: http://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. – Bazzz Jan 24 '11 at 12:14

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

7 Answers7

Linked

Related