24

如何将图像背景添加到我的网站？

body {
     margin: 0;
     background: url(background.png);
     background-size: 1440px 800px;
     background-repeat:no-repeatdisplay: compact;
     font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;

我做了那么多，但我的页面上没有任何显示。我是 CSS 初学者。

更新：

body {
 margin: 0;
 background-image: url(.../img/background.jpg);
 background-size: 1440px 800px;
 background-repeat:no-repeat;
 display: compact;
 font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
4

9 回答 9

40

将背景网址放在引号中。

它应该是background: url('background.png');

有关工作演示，请参见此处。

您还遇到background-repeat line两个语句之间缺少分号的问题。如果你的背景真的很小，你不会因为这个问题而看到它。

只是为了更新解决方案，在其他问题中，背景文件.../background.jpg在它应该被引用的时候被引用../background.jpg（2 个点，而不是 3 个）。

于 2012-06-08T16:20:59.850 回答
6

不是问题，以下行不正确，因为 for 的语句background-repeat在下一个 for 语句之前没有关闭display...

background-repeat:no-repeatdisplay: compact;

这不应该是

background-repeat:no-repeat;
display: compact;

如果 URL 正确，添加或删除引号（根据我的经验）没有区别。图片的路径是否正确？如果你在 CSS 中给出资源的相对路径，它是相对于 CSS 文件的，而不是包含 CSS 的文件。

于 2012-06-08T16:25:55.213 回答
2

您的图像是否与您的 css 文件位于同一文件夹/目录中？如果是这样，您的图片网址是正确的。否则，它不是。

如果你的文件夹结构是这样的......

网页
-index.html
-css
- - style.css
- images
- - background.png

然后要引用您的 css 文件中的图像，您应该使用以下路径：

../图像/背景.png

所以这将是背景： url('../images/background.png');

逻辑很简单：通过键入“../”（根据需要多次）上一个文件夹。通过指定您要进入的文件夹来进入一个文件夹。

于 2012-06-08T16:31:34.063 回答
2

在 html、body 或 wrapper 元素上添加背景图像以实现背景图像会导致填充问题。在 github 上查看这张票https://github.com/twitter/bootstrap/issues/3169 。ShaunR 的评论也是创作者对此的回应之一。created ticket 中的给定解决方案并不能解决问题，但如果您不使用响应式功能，它至少可以让事情顺利进行。

假设您使用的容器没有响应式功能，并且宽度为 960px，并且想要实现 10px 的内边距，您设置：

.container {
   min-width: 940px;
   padding: 10px;
}
于 2013-01-30T03:21:10.387 回答
1 
body {
    background-image: url(your image link);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size: cover;
    background-color: #464646;
}
于 2015-03-04T10:41:12.500 回答
1

如果你不能重复背景图像（出于审美原因），那么这个方便的 JQuery 插件将拉伸背景图像以适应窗口。

回弹 http://srobbin.com/jquery-plugins/backstretch/

效果很好...

~干杯！

于 2013-05-20T22:49:24.840 回答
1

如果添加以下内容，则可以设置背景颜色或图像（您的 css）

 html { 
     background-image: url('http://yoursite/i/tile.jpg');
     background-repeat: repeat; 
 }

 .body {
     background-color: transparent; 
 }

这是因为 BS 对背景颜色和.container类应用了 css 规则。

于 2012-07-13T12:15:42.787 回答
0

为了更加模块化，并且如果您有许多背景图像要合并到任何您想要的位置，您可以为每个图像创建一个类：

.background-image1  
{
background: url(image1.jpg);
 }
.background-image2  
{
background: url(image2.jpg);
 }

然后通过添加 div 将图像插入到任何你想要的地方

<div class='background-image1'>
    <div class="page-header text-center", style='margin: 20px 0 0px;'>
         <h1>blabaaboabaon</h1>
    </div>
</div>
于 2014-07-31T16:34:45.600 回答
0

问题也可能是样式表导入的顺序。我不得不将自定义样式表导入移到引导导入下方。

于 2016-06-30T18:46:20.943 回答