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