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

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.