Question

如何在网站上添加图片背景？

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;

Answer 1

将背景网址放在引号中。

应为background: url('background.png');

请参阅here了解工作演示。

background-repeat line在两个语句之间缺少分号也存在问题。如果你的背景非常小，你就不会因为这个问题而看到它。

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

Answer 2

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

background-repeat:no-repeatdisplay: compact;

不应该是

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

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

Answer 3

您的图片与css文件位于同一文件夹/目录中吗？如果是这样，您的图片网址是正确的。否则，事实并非如此。

如果你的文件夹结构有任何可能性......

网页
-index.html
-CSS
- - style.css
- 图像
- - background.png

然后在css文件中引用图像，你应该使用以下路径：

../图像/ background.png

那就是背景：url（'../ images / background.png'）;

逻辑很简单：输入一个文件夹，输入“../”（根据需要多次）。通过指定要转到的文件夹来下载一个文件夹。

Answer 4

在html，body或包装器元素上添加背景图像以实现背景图像将导致填充问题。在github上查看此票证https://github.com/twitter/bootstrap/issues/3169。 ShaunR的评论也是创作者对此的回应之一。创建的故障单中的给定解决方案无法解决问题，但如果您不使用响应功能，它至少可以解决问题。

假设您正在使用没有响应功能的容器，并且宽度为960px，并且想要实现10px填充，则设置：

.container {
   min-width: 940px;
   padding: 10px;
}

Answer 5

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

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

 .body {
     background-color: transparent; 
 }

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

Answer 6

如果你不能重复背景图片（出于美学原因），然后这个方便的JQuery插件将背景图像拉伸到适合窗户。

直道 http://srobbin.com/jquery-plugins/backstretch/

效果很好......

〜干杯！

Answer 7

body {
    background-image: url(your image link);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size: cover;
    background-color: #464646;
}

Answer 8

为了获得更多模块化，如果您想要在任何地方添加许多背景图像，您可以为每个图像创建一个类：

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

Answer 9

问题还可能是样式表导入的顺序。我不得不在引导程序导入下面移动我的自定义样式表导入。

在CSS中插入背景图像（Twitter Bootstrap）

9 个答案: