подходит фон для любого размера экрана

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; 

} 

Кроме того, у меня есть другой раздел, который имеет другое фоновое изображение с другим цветом фона обертки.

---

Я использую свойство фонового размера перед, но проблема в том, что она не подходит для всего экрана, так как я установил раздел 1024px.

Answer 1

Вы можете использовать background-size: cover, чтобы растянуть фон по своему усмотрению.

More information

Answer 2

Я предлагаю использовать background-size CSS свойство, чтобы получить то, что вы ищете.

Например,

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

Надеется, что это помогает.

Answer 3

Попробуйте это, возможно, ответ на то, что вы ищете.

1. первый метод: Это будет просто масштабировать изображение все или фона, но не поддерживается браузером старой.

   .class { Размер фона: крышка! Important; /* Ниже для IE 8 или менее */ фильтр: progid: DXImageTransform.Microsoft.AlphaImageLoader (src = 'link-to-image-with-http', sizingMethod = 'scale');

   }

2. второй способ: сделать изображение высокого разрешения и применить эту, отдых полосу прокрутки будет заботиться.

   .class-img { ширина: 100%; позиция: абсолютная; верх: 0; Слева: 0; }

Check this link

Answer 4

Вы можете использовать jquery-backstretch