cssbackground-imageopacity

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

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?

Solution

  • 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