html - 如何在 Bootstrap 中将背景图像设置为行列？

Question

我试图在 bootstrap 中将背景图像设置为行列，但由于某种原因它不起作用，index.html 文件和图像在根目录中，我搜索了很多在谷歌但我没有找到解决方案，请帮助，并在此先感谢

index.html代码

<div class="row main_row">
        <div class="col-md-2 left_menu">
            <form role="form">
              <div class="form-group">
                <label for="email">Employee ID:</label>
                <input type="email" class="form-control" id="email">
              </div>
              <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd">
              </div>
              <div class="checkbox">
                <label><input type="checkbox"> Remember me</label>
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
        <div class="col-md-10 right_menu">
         123
        </div>
    </div>

CSS 代码:

.right_menu{
    background: url('background_image1.jpg') no-repeat;
   -webkit-background-size: 100% auto;
   -moz-background-size: 100% auto;
   -o-background-size: 100% auto;
    background-size: 100% auto;
}

我做错了什么？？

Answer 1

您的图片路径应该与您的 .css 文件相关。因此，例如，如果您的 CSS 文件位于文件夹 /css/styles.css 中，而您的图像位于根文件夹 (/background_image1.jpg) 中，您应该将背景 url 设置为:

background: url('../background_image1.jpg') no-repeat;