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?

Answer 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

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 worked perfectly for me

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

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

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/

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

Answer 7

1. 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*/
   }
   

2. Show part of the image using background-position:

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

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

4. Same as yossi's.