让我的背景图像在中间

问题描述：

我对网站有点问题。我想让背景图像居中（在中间）。目前尚不清楚，但这里是图像：让我的背景图像在中间

正如你所看到的，有在后台一个小树林图像并在其上一个div。我希望这个背景图像能够居中（但是文本的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; 
}

目前还不清楚你问什么，或者试图完成。根据你的CSS，图像居中。而从你提供的图片来看，如果没有更多的信息，就无法判断它是否居中。 –

答

这是你想要的吗？

向菜单添加了宽度以及margin: auto。这“中心”在屏幕上的菜单。

然后，将.menus的background-size属性调整为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 -->

_“我想制作背景图片......”_您的解决方案都不适用于OP – zgood

是的，我试过了，但它没有奏效，我不想要一个标签，我的图片在div中作为背景 –

@ThéoBenoit刚刚更新。检查第一个片段 – Illdapt

答

如果你试图居中菜单DIV，只要使用这个CSS：

.menu { text-align:center; }

浮动没有物业中心。 – izulito

答

看看下面的代码。

.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 -->

答

尝试：

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

让我的背景图像在中间

相关推荐