我的页面结构是这样的：
<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 > </div><span>Design website</span></li></a>
<a href="#"><li id="slide2"><div > </div><span>Graphic design</span></li></a>
<a href="#"><li id="slide3"><div > </div><span> porfolio</span></li></a>
<a href="#"><li id="slide4"><div > </div><span>cost</span></li></a>
<a href="#"><li id="slide5"><div > </div><span>order</span></li></a>
<a href="#"><li id="slide6"><div > </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。