在 CSS 中插入背景图片(Twitter Bootstrap)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/10952523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Insert a background image in CSS (Twitter Bootstrap)
提问by AppSensei
How can i add a image background to my website?
如何为我的网站添加图像背景?
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;
I did that much but nothing shows up on my page. I'm a CSS beginner.
我做了那么多,但我的页面上没有显示任何内容。我是一个 CSS 初学者。
Updated:
更新:
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;
回答by sachleen
Put the background url in quotes.
将背景网址放在引号中。
It should be background: url('background.png');
它应该是 background: url('background.png');
See herefor working demo.
有关工作演示,请参见此处。
You also have an issue with the background-repeat line
missing a semicolon in between two statements. If your background is really tiny you won't see it because of that issue.
您也有background-repeat line
两个语句之间缺少分号的问题。如果你的背景真的很小,你就不会因为那个问题而看到它。
Just to update on the solution, among the other issues, the background file was being refrenced with .../background.jpg
when it should have been ../background.jpg
(2 dots, not 3).
只是为了更新解决方案,在其他问题中,背景文件.../background.jpg
在应该出现的时候被引用../background.jpg
(2 个点,而不是 3 个)。
回答by Mike Sav
isn't the problem the following line is incorrect as the statement for background-repeat
isn't closed before the next statement for display
...
不是问题下一行是不正确的,因为在 forbackground-repeat
的下一个语句之前没有关闭 for display
...
background-repeat:no-repeatdisplay: compact;
Shouldn't this be
这不应该是
background-repeat:no-repeat;
display: compact;
adding or removing quotes (in my experience) makes no difference if the URL is correct. Is the path to the image correct? If you give a relative path to a resource in a CSS it's relative to the CSS file, not the file including the CSS.
如果 URL 正确,添加或删除引号(根据我的经验)没有区别。图片的路径是否正确?如果你在 CSS 中给出一个资源的相对路径,它是相对于 CSS 文件的,而不是包含 CSS 的文件。
回答by banzomaikaka
Is your image on the same folder/directory as your css file? If so, your image url is correct. Otherwise, it's not.
你的图片和你的 css 文件在同一个文件夹/目录中吗?如果是这样,您的图片网址是正确的。否则,它不是。
If by any chance your folder structure is like so...
如果有任何机会您的文件夹结构是这样的......
webpage
-index.html
-css
- - style.css
- images
- - background.png
then to reference the image on your css file you should use the following path:
网页
-index.html
-css
- - style.css
- images
- - background.png
然后要引用 css 文件中的图像,您应该使用以下路径:
../images/background.png
../图像/背景.png
So that would be background: url('../images/background.png');
所以这就是背景: url('../images/background.png');
The logic is simple: Go up one folder by typing "../" (as many times as you need). Go down one folder by specifying the folder you wish to go down to.
逻辑很简单:通过键入“../”(根据需要多次)进入一个文件夹。通过指定要下移到的文件夹,下移一个文件夹。
回答by sata
Adding background image on html, body or a wrapper element to achieve background image will cause problems with padding. Check this ticket https://github.com/twitter/bootstrap/issues/3169on github. ShaunR's comment and also one of the creators response to this. The given solution in created ticket doesn't solve the problem, but it at least gets things going if you aren't using responsive features.
在 html、body 或包装元素上添加背景图像以实现背景图像会导致填充问题。在 github 上查看此票https://github.com/twitter/bootstrap/issues/3169。ShaunR 的评论以及创作者对此的回应之一。创建的工单中给定的解决方案并不能解决问题,但如果您不使用响应式功能,它至少可以使事情顺利进行。
Assuming that you are using container without responsive features, and have a width of 960px, and want to achieve 10px padding, you set:
假设您使用的是没有响应功能的容器,并且宽度为 960 像素,并且想要实现 10 像素的填充,您可以设置:
.container {
min-width: 940px;
padding: 10px;
}
回答by Paul Brady
And if you can't repeat the background image (for esthetic reasons), then this handy JQuery plugin will stretch the background image to fit the window.
如果您不能重复背景图像(出于美观原因),那么这个方便的 JQuery 插件将拉伸背景图像以适合窗口。
Backstretch http://srobbin.com/jquery-plugins/backstretch/
后伸 http://srobbin.com/jquery-plugins/backstretch/
Works great...
效果很好...
~Cheers!
~干杯!
回答by Koryun Vardapetyan
body {
background-image: url(your image link);
background-position: center center;
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
background-color: #464646;
}
回答by Christopher A. Lewis
If you add the following you can set the background colour or image (your css)
如果添加以下内容,则可以设置背景颜色或图像(您的 css)
html {
background-image: url('http://yoursite/i/tile.jpg');
background-repeat: repeat;
}
.body {
background-color: transparent;
}
This is because BS applies a css rule for background colour and also for the .container
class.
这是因为 BS 对背景颜色和.container
类应用了 css 规则。
回答by Half_Duplex
The problem can also be the ordering of your style sheet imports. I had to move my custom style sheet import below the bootstrap import.
问题也可能是样式表导入的顺序。我不得不将我的自定义样式表导入移动到引导程序导入下方。
回答by Samawi
For more modularity and in case you have many background images that you want to incorporate wherever you want you can for each image create a class :
为了更多的模块化,如果你有很多背景图片想要合并到任何你想要的地方,你可以为每个图片创建一个类:
.background-image1
{
background: url(image1.jpg);
}
.background-image2
{
background: url(image2.jpg);
}
and then insert the image wherever you want by adding a div
然后通过添加 div 将图像插入到您想要的任何位置
<div class='background-image1'>
<div class="page-header text-center", style='margin: 20px 0 0px;'>
<h1>blabaaboabaon</h1>
</div>
</div>