Question

我的页面结构是这样的：

<div id="maincontent">
   <div id="wrapper">
      <section id="first">

        <div id="slide1_header">
    <!--i have a background image here that should have to be fit in any screen 
           mostly(tablet and android device not required) but desktop or laptop screen size is required to be fit like somebody has the screen with 800px 1024px 1333px or ...
  widths            --> 
            <div id="logo"><a href="#" ><h1>Macras</h1></a></div>
            <nav>
                <ul>
                    <a href="#"><li id="slide1"><div >&nbsp;</div><span>Design website</span></li></a>
                    <a href="#"><li id="slide2"><div >&nbsp;</div><span>Graphic design</span></li></a>
                    <a href="#"><li id="slide3"><div >&nbsp;</div><span> porfolio</span></li></a>
                    <a href="#"><li id="slide4"><div >&nbsp;</div><span>cost</span></li></a>
                    <a href="#"><li id="slide5"><div >&nbsp;</div><span>order</span></li></a>
                    <a href="#"><li id="slide6"><div >&nbsp;</div><span>Contact us</span></li></a>
                </ul>
            </nav>
        </div>
        <div id="slide1_body">

            <ul>
                <a href="#"><li><h2>Consult with our special consular</h2></li></a>
                <a href="#"><li><h2>get cost</h2></li></a>
                <a href="#"><li><h2> Design</h2></li></a>
            </ul>   
        </div>
      </section>
   </div>
</div>

我的css代码就像这里，但我遇到的问题是背景大小不适合屏幕，因为我将该部分设置为1024px所以我应该使用百分比还是有一个特殊的技术来解决这个问题。

css代码：

#mainContent
{
    max-width:2048px;

    margin:0 auto;

}

#wrapper
{

    background-color:#e0e0e0;
    width:100%;
    margin:0 auto;

}
#first
{
    background-color:#e0e0e0;
    height:1000px;
    min-height:100%;
    min-width: 1024px;
    max-width: 1300px;
    margin: 0 auto;


}
#slide1_header
{
    width: 100%;
    height:180px;
    background-color:#e8e8e8;
}
#logo
{
    margin-top:20px;
    background:url("../images/logo.png") no-repeat;
    height:140px;
    width:20%;
    float:right;
    margin-left:20px;
}

#logo h1
{
    text-indent: -9999px;
}
nav{oveflow:hidden; margin:20px auto; width:90%; }
nav ul li
{
    display:inline-block;
    height:110px;
    width:10%;
    margin-left:3px;

    background-color: #f1f1f1;
    border-radius: 10px;
    border: 2px solid #efefef;
}

nav ul li div
{
    width:61px;
    height:60px;

    margin:10px auto;
}

nav ul li span
{
    color:#adadad;
    text-shadow:1px 1px white;
    font-weight:bold;
    padding-right:30px;
}
#slide1 div
{
    background:url("../images/desingweb_icon.png") no-repeat; 
}
#slide2 div
{
    background:url("../images/graphicDesign_icon.png") no-repeat;
}
#slide3 div
{
    background:url("../images/nemoneh_icon.png") no-repeat;
}
#slide4 div
{
    background:url("../images/tarefeh_icon.png") no-repeat;
}
#slide5 div
{
    background:url("../images/hesab_icon.png") no-repeat;
}
#slide6 div
{
    background: url("../images/about_icon.png") no-repeat;
}
#slide1:hover{  background-color:#d3292a;}
#slide1:hover span{color:white; text-shadow:1px 1px grey;}
#slide2:hover{background-color:#1486ba;}
#slide2:hover span{color:white; text-shadow:1px 1px grey;}
#slide3:hover {background-color:#74a50d;}
#slide3:hover span{color:white;text-shadow:1px 1px grey; }
#slide4:hover{background-color:#ebebeb;}
#slide4:hover span{color:white;text-shadow:1px 1px grey; }
#slide5:hover{background-color:#2b2b2b;}
#slide5:hover span{color:white;text-shadow:1px 1px grey; }
#slide6:hover{background-color:#f7a900;}
#slide6:hover span{color:white;text-shadow:1px 1px grey; }

#slide1_body
{
    background:url("../images/design_bg.jpg") no-repeat;
    background-size: 100% 100%;
    height:750px;

}
#slide1_body ul
{
    /*position:relative;
    top:408px;
    right:68.3%;*/
    padding-top:385px;
    padding-left:240px;
        width:12%;

}
#slide1_body ul li
{
background-color:#828282;

    color:#d9d9d9;
    text-align:center;
    padding:10% 10%;
    margin-top:3%;
    height:40px;
    width:145px;

}
#slide1_body ul li h2{
padding-top:10px;
}
#slide1_body ul li:hover
{
    background-color:#d02626;
    color:#fbf9f9;

}

另外，我有不同的部分，它们具有不同的背景图像和不同的包装背景颜色。

之前我使用的是background-size属性，但问题是它不适合所有屏幕，因为我将该部分设置为1024px。

Answer 1

试试这个，也许回答你在寻找什么。

第一种方法：它只是缩放图像全部或背景，但旧版浏览器不支持。

的.class { background-size：cover！important; / *以下是IE 8或更低* / filter：progid：DXImageTransform.Microsoft.AlphaImageLoader（src ='link-to-image-with-http'，sizingMethod ='scale'）;

}
第二种方法：制作高分辨率图像并应用此功能，休息滚动条会照顾。

.class-img { 宽度：100％; 位置：绝对; 顶部：0; 左：0; }

Check this link

Answer 2

您可以使用background-size: cover拉伸背景以适应。

More information

Answer 3

我建议使用background-size css属性来获取您要查找的内容。

For Instance，

.yourclass {
    background-size: 100% auto;
}

希望这有帮助。

Answer 4

您可以使用jquery-backstretch

适合任何屏幕尺寸的背景

4 个答案: