Question

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

正如你所看到的，背景中有一个小木图像，上面有一个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;
}

Answer 1

有两种方法。新老。

新功能：（执行此操作）

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

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

旧：（请勿执行此操作）

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

以旧方式，您需要多行代码，而现在只需要一行或两行。例如。这：background: url(../img/wood.jpg) no-repeat center center/cover auto;而不是所有这四个步骤：background-image: url(../img/wood.jpg);，background-position: center;，background-repeat: no-repeat;，background-size: auto;

Answer 2

查看以下代码。

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

这是你想要的吗？

为菜单和margin: auto添加了宽度。这个＆＃39;中心＆＃39;屏幕上的菜单。

然后，将.menus的background-size属性调整为100％宽度，任何所需的高度。这给人的印象是背景小于重叠的菜单div。

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

尝试：

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

Answer 5

如果您尝试将菜单div居中，只需使用此CSS：

.menu { text-align:center; }

让我的背景图像在中间

5 个答案: