jQuery 背景图片：url("images/plaid.jpg") 不重复；不会出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13945089/
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
background-image: url("images/plaid.jpg") no-repeat; wont show up
提问by codey b
I can't seem to make my plaid.jpg the background on any of my pages, let alone all of them, I've tried selecting it by body, html, *, the specific id of "home". nothing works. The image is 300 x 421 pixels. I don't need it to show up pretty, i just want it to show up, behind everything. how would my css look for this? the plaid.jpg picture is in my images folder in the same directory as my index.html file. This link is at the top of my index.html file. and my stylesheet is in my stylesheets folder named mystyles.css.
我似乎无法将我的 plaid.jpg 作为我任何页面的背景，更不用说所有页面了，我尝试通过 body、html、*、“home”的特定 id 来选择它。没有任何效果。图像为 300 x 421 像素。我不需要它看起来很漂亮，我只希望它出现在一切背后。我的 css 将如何查找这个？plaid.jpg 图片在我的图片文件夹中，与我的 index.html 文件位于同一目录中。此链接位于我的 index.html 文件的顶部。我的样式表位于名为 mystyles.css 的样式表文件夹中。
<link rel="stylesheet" type="text/css" href="stylesheets/mystyles.css">
I have tried altering my .CSS file every way imaginable in my opinion. the first 30 google results for "background-image not showing up" and none worked. I'm aware it's probably something simple.
我曾尝试以我认为可以想象的各种方式更改我的 .CSS 文件。“背景图像未显示”的前 30 个谷歌结果，没有一个起作用。我知道这可能很简单。
mystyles.css in its most basic form with no selector.
mystyles.css 的最基本形式，没有选择器。
background-image: url("images/plaid.jpg") no-repeat;
index.html
索引.html
<body>
<!-- Page: home -->
<div id="home"
data-role="page"
data-title="Home">
<div data-role="header"
data-position="fixed"
data-theme="b">
<h1>Home</h1>
<a href="#info"
data-icon="info"
data-iconpos="notext"
data-rel="dialog"
class="ui-btn-right"
>Info</a>
</div><!-- header -->
<div data-role="content">
<div data-role="controlgroup" data-theme="e">
<a href="#blog"
data-role="button"
data-icon="arrow-r"
data-theme="e"
>Blog</a>
<a href="#videos"
data-role="button"
data-icon="arrow-r"
data-theme="e"
>Videos</a>
<a href="#photos"
data-role="button"
data-icon="arrow-r"
data-theme="e"
>Photos</a>
<a href="#tweets"
data-role="button"
data-icon="arrow-r"
data-theme="e"
>Tweets</a>
</div><!-- links -->
</div> <!-- content -->
</div><!-- page -->
this wasn't succesful
这不成功
body {
background-image: url("/images/plaid.jpg");
background-repeat: no-repeat;
}
this is whats in my also
这也是我的
<head>
<meta charset="utf-8" />
<title>Mob App</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="shortcut icon" href="images/favicon.ico" />
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />-->
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="javascripts/myscript.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/mystyles.css" />
</head>
回答by JFK
You either use :
你要么使用：
background-image: url("images/plaid.jpg");
background-repeat: no-repeat;
... or
... 或者
background: transparent url("images/plaid.jpg") top left no-repeat;
... but definitively not
......但绝对不是
background-image: url("images/plaid.jpg") no-repeat;
EDIT: Demo at JSFIDDLEusing absolute paths (in case you have troubles referring to your images with relative paths).
编辑：使用绝对路径在JSFIDDLE进行演示（以防您在使用相对路径引用图像时遇到问题）。
回答by Gabriele Petrioli
Most important
最重要的
Keep in mind that relative URLs are resolved from the URL of your stylesheet.
请记住，相对 URL 是从样式表的 URL 解析的。
So it will work if folder imagesis inside the stylesheetsfolder.
因此，如果文件夹images在stylesheets文件夹内，它将起作用。
From you description you would need to change it to either
根据您的描述，您需要将其更改为
url("../images/plaid.jpg")
or
或者
url("/images/plaid.jpg")
Additional 1
附加 1
Also you cannot have no selector..
你也不能没有选择器..
CSS is applied through selectors..
CSS 通过选择器应用..
Additional 2
附加 2
You should use either the shorthand backgroundto pass multiple values like this
您应该使用速记background来传递这样的多个值
background: url("../images/plaid.jpg") no-repeat;
or the verbose syntax of specifying each property on its own
或单独指定每个属性的详细语法
background-image: url("../images/plaid.jpg");
background-repeat:no-repeat;
回答by duskwuff -inactive-
If that really is all that's in your CSS file, then yes, nothing will happen. You need a selector, even if it's as simple as body:
如果这真的是您的 CSS 文件中的全部内容，那么是的，什么都不会发生。您需要一个选择器，即使它很简单body：
body {
background-image: url(...);
}
回答by Sean Keating
Try this:
尝试这个：
body
{
background:url("images/plaid.jpg") no-repeat fixed center;
}
jsfiddle example: http://jsfiddle.net/Q9Zfa/
jsfiddle 示例：http: //jsfiddle.net/Q9Zfa/
回答by Surinder ツ
You may debug using two ways:
您可以使用两种方式进行调试：
Press CTRL+Uto view page Source . Press CTRL+Fto find "mystyles.css" in source . click on mystyles.css link and check if it is not showing "404 not found".
You can INSPECT ELEMENT IN FIRBUG and set path to Image ,Set Image height and width because sometimes image doesnt show up.
按CTRL+U查看页面 Source 。按CTRL+F在 source 中找到“mystyles.css”。单击 mystyles.css 链接并检查它是否未显示“404 not found”。
您可以检查 FIRBUG 中的元素并将路径设置为图像，设置图像高度和宽度，因为有时图像不显示。
Hope this may works !!.
希望这可能有效！！
回答by Raimac
<style>
background: url(images/Untitled-2.fw.png);
background-repeat:no-repeat;
background-position:center;
background-size: cover;
</style>
