중간에 내 배경 이미지 만들기

Question

웹 사이트에 약간 문제가 있습니다. 배경 이미지를 중앙에 배치하고 싶습니다. 그것은 분명하지 않다,하지만 여기에 이미지 :

당신이 볼 수 있듯이, 백그라운드에서 작은 나무 이미지와 그것에 사업부가있다. 나는이 배경 이미지를 중심에 놓고 싶다. (그러나 텍스트가있는 div는 움직이지 않아야한다.) 지금까지 내가 만든 것은 - 많은 것을 시도했지만 효과가 없습니다. 도움이 필요해!

HTML

<div class="container-fluid menus" id="our-menus"> 
    <div class="container menu"> 
     <div class="menu-content"> 
      <div class="container"> 
       <h3>Menu</h3> 
       <h1>Estival</h1> 
       <img src="assets/img/dinner.png" class="img-menu"> 
       <h2>Entrées</h2> 
       <p>Carpaccio de melon charentais</p> 
       <p>ou</p> 
       <p>Moules de bouchot marinière</p> 
       <h2>Plats</h2> 
       <p>Coeur de boeuf & buffone au basilic</p> 
       <p>ou</p> 
       <p>Brochette d'agneau grillée, jus au thym</p> 
       <p>ou</p> 
       <p>Onglet de boeuf grillé aux échalotes confites</p> 
       <p>ou</p> 
       <p>Filet de cofin rôti aux épices</p> 
       <h2>Desserts</h2> 
       <p>Coupe glacée manuréva</p> 
       <p>ou</p> 
       <p>Brochette de fraises au chocolat</p> 
       <p>ou</p> 
       <p>Croustillant à l'orange aux fruits frais, Coulis de framboises</p> 
      </div><!-- container --> 
     </div> 
    </div><!-- container --> 
</div><!-- container-fluid --> 

CSS

.menus{ 
    background-image: url(../img/wood.jpg); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: auto; 
} 

.menu{ 
    background-color: #F8F8F8; 
    padding: 20px 20px 20px 20px; 
} 

Answer 1

이 당신이 원하는 무엇인가?

메뉴에 너비와 margin: auto을 추가했습니다. 이렇게하면 메뉴가 화면에 '센터링'됩니다.

그런 다음 .menus의 배경 크기 속성을 원하는 높이로 100 % 너비로 조정했습니다. 배경이 오버레이 메뉴 div보다 작다는 인상을줍니다.

예 :

.menus{ 
 
background-image: url(https://static.pexels.com/photos/139306/pexels-photo-139306.jpeg); 
 
background-position: center; 
 
background-repeat: no-repeat; 
 
background-size: 100% 500px; 
 
} 
 

 
.menu{ 
 
margin:auto; 
 
width:50%; 
 
background-color: #F8F8F8; 
 
padding: 20px 20px 20px 20px; 
 
}

<div class="container-fluid menus" id="our-menus"> 
 
      <div class="container menu"> 
 
       <div class="menu-content"> 
 
        <div class="container"> 
 
         <h3>Menu</h3> 
 
         <h1>Estival</h1> 
 
         <img src="assets/img/dinner.png" class="img-menu"> 
 
         <h2>Entrées</h2> 
 
         <p>Carpaccio de melon charentais</p> 
 
         <p>ou</p> 
 
         <p>Moules de bouchot marinière</p> 
 
         <h2>Plats</h2> 
 
         <p>Coeur de boeuf & buffone au basilic</p> 
 
         <p>ou</p> 
 
         <p>Brochette d'agneau grillée, jus au thym</p> 
 
         <p>ou</p> 
 
         <p>Onglet de boeuf grillé aux échalotes confites</p> 
 
         <p>ou</p> 
 
         <p>Filet de cofin rôti aux épices</p> 
 
         <h2>Desserts</h2> 
 
         <p>Coupe glacée manuréva</p> 
 
         <p>ou</p> 
 
         <p>Brochette de fraises au chocolat</p> 
 
         <p>ou</p> 
 
         <p>Croustillant à l'orange aux fruits frais, Coulis de framboises</p> 
 
        </div><!-- container --> 
 
       </div> 
 
      </div><!-- container --> 
 
    </div><!-- container-fluid -->

Answer 2

그냥이 CSS 사용, 메뉴 사업부를 중심하려는 경우 : 코드 아래

.menu { text-align:center; }

Answer 3

체크 아웃.

.menus{ 
 
background-image: url('//www.fillmurray.com/500/500'); 
 
background-position: center; 
 
background-repeat: no-repeat; 
 
background-size: cover; 
 
} 
 

 
.menu{ 
 
background-color: #F8F8F8; 
 
padding: 20px 20px 20px 20px; 
 
max-width: 300px; 
 
margin: 0 auto; 
 
}

<div class="container-fluid menus" id="our-menus"> 
 
      <div class="container menu"> 
 
       <div class="menu-content"> 
 
        <div class="container"> 
 
         <h3>Menu</h3> 
 
         <h1>Estival</h1> 
 
         <img src="assets/img/dinner.png" class="img-menu"> 
 
         <h2>Entrées</h2> 
 
         <p>Carpaccio de melon charentais</p> 
 
         <p>ou</p> 
 
         <p>Moules de bouchot marinière</p> 
 
         <h2>Plats</h2> 
 
         <p>Coeur de boeuf & buffone au basilic</p> 
 
         <p>ou</p> 
 
         <p>Brochette d'agneau grillée, jus au thym</p> 
 
         <p>ou</p> 
 
         <p>Onglet de boeuf grillé aux échalotes confites</p> 
 
         <p>ou</p> 
 
         <p>Filet de cofin rôti aux épices</p> 
 
         <h2>Desserts</h2> 
 
         <p>Coupe glacée manuréva</p> 
 
         <p>ou</p> 
 
         <p>Brochette de fraises au chocolat</p> 
 
         <p>ou</p> 
 
         <p>Croustillant à l'orange aux fruits frais, Coulis de framboises</p> 
 
        </div><!-- container --> 
 
       </div> 
 
      </div><!-- container --> 
 
    </div><!-- container-fluid -->

Answer 4

시도 :

body { 
    background-image: url('smiley.gif'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center; 
}