私のページ構造は次のようなものです：
<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 に設定したため、すべての画面に収まらないという問題があります。