如何使伪元素的背景图像拉伸以适合宽度？

Question

I am trying to overlay some text on an image, and also make the background image 0.2 transparent. now my question is: How to make the background image of the pseudo element stretch to fit the width or crop the image to fit the screen（without distort the image）? Edit the code on codepen here .

css:

#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Selwyn_College_Old_Court%2C_Cambridge%2C_UK_-_Diliff.jpg/944px-Selwyn_College_Old_Court%2C_Cambridge%2C_UK_-_Diliff.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

html:

<div id="main">
  Text on top, no big deal, no big deal. Just a little text and stuff. That's all.
</div>

Answer 1

You can use this:

#main:after {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Selwyn_College_Old_Court%2C_Cambridge%2C_UK_-_Diliff.jpg/944px-Selwyn_College_Old_Court%2C_Cambridge%2C_UK_-_Diliff.jpg); 
width: 100%;
height: 100%;
opacity : 0.2;
z-index: -1;

background-size: 100% 100%;    /* added*/
background-repeat: no-repeat;  /* optinal*/

}

Or in one line syntax like this:

background-size: auto|length|cover|contain|initial|inherit;

For more detail click.

Answer 2

It's not entirely clear what you are tying to do but you could try adding background-size:cover as follows:

JSfiddle

CSS

#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Selwyn_College_Old_Court%2C_Cambridge%2C_UK_-_Diliff.jpg/944px-Selwyn_College_Old_Court%2C_Cambridge%2C_UK_-_Diliff.jpg); 
    background-repeat: no-repeat;

    background-size: cover;
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;

}