Background images: how to fill whole div if image

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?

Answer 1

This worked perfectly for me

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

Answer 2

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

background-size: cover;

Answer 3

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;

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

Answer 5

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

Answer 6

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/