如何在内部具有100％宽度/高度的背景图像 <li> ？

Question

I have a slider with 4 items in it.

CSS

#section_3 {height:600px;}
#section_3 ul {list-style:none; width:400%; margin:0; padding:0;}
#section_3 ul li {float:left; width:25%; display:block; }
#section_3 ul li.sec1{background:url('../imgs/bg1.jpg') no-repeat; height:600px;}
#section_3 ul li.sec2{background:url('../imgs/bg2.jpg') no-repeat; height:600px;}
#section_3 ul li.sec3{background:url('../imgs/bg1.jpg') no-repeat; height:600px;}
#section_3 ul li.sec4{background:url('../imgs/bg2.jpg') no-repeat; height:600px;}

HTML

<div id="section_3" class="overflow">
        <ul id="slider">
            <li class="sec1">
                <h1>1</h1>
            </li>
            <li class="sec2">
                <h1>2</h1>
            </li>
            <li class="sec3">
                <h1>3</h1>
            </li>
            <li class="sec4">
                <h1>4</h1>
            </li>
        </ul>
    </div>

The slider is working perfectly but now I would like to make in sort that each LI have it's own background 100% width and 100% height.

It could be in jQuery, javascript

How can I achieve that?

Answer 1

You can't scale CSS background images in a cross-browser manner. You will need to put the image in the html ( <img/> ), absolute position it inside the <li> to take it out of the flow, and use CSS (possibly even JS depending on your situation) to scale the image to 100% the size of the <li> .

Answer 2

Try

#section_3 ul li.sec1{background:url('../imgs/bg1.jpg') no-repeat; height:600px; background-size: 100% 100%;}
#section_3 ul li.sec2{background:url('../imgs/bg2.jpg') no-repeat; height:600px; background-size: 100% 100%;}
#section_3 ul li.sec3{background:url('../imgs/bg1.jpg') no-repeat; height:600px; background-size: 100% 100%;}
#section_3 ul li.sec4{background:url('../imgs/bg2.jpg') no-repeat; height:600px; background-size: 100% 100%;}

It's a simple fix in CSS. If you wanted to do it in Javascript, try

document.getElementById("id_of_li").style.backgroundSize = "100% 100%";

Check out the w3schools tutorial: http://www.w3schools.com/cssref/css3_pr_background-size.asp