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

问题

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?

回答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

回答2:

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

background-size: cover;

回答3:

This worked perfectly for me

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

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

回答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/

回答6:

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;

回答7:

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.

来源：https://stackoverflow.com/questions/4779577/background-images-how-to-fill-whole-div-if-image-is-small-and-vice-versa

标签

css

background-image

opacity