background-image: url(“images/plaid.jpg”) no-repea

2019-02-17 00:06发布

站内问答 / jQuery
551 6 6

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.

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

mystyles.css in its most basic form with no selector.

  background-image: url("images/plaid.jpg") no-repeat;

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

6条回答
ら.Afraid
2楼-- · 2019-02-17 00:17

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 JSFIDDLE using absolute paths (in case you have troubles referring to your images with relative paths).

查看更多
0人赞 添加讨论(0) 举报
forever°为你锁心
3楼-- · 2019-02-17 00:24

Try this:

body
{ 
    background:url("images/plaid.jpg") no-repeat fixed center;
}

jsfiddle example: http://jsfiddle.net/Q9Zfa/

查看更多
0人赞 添加讨论(0) 举报
爷的心禁止访问
4楼-- · 2019-02-17 00:33

You may debug using two ways:

  1. Press CTRL+U to view page Source . Press CTRL+F to find "mystyles.css" in source . click on mystyles.css link and check if it is not showing "404 not found".

  2. You can INSPECT ELEMENT IN FIRBUG and set path to Image ,Set Image height and width because sometimes image doesnt show up.

Hope this may works !!.

查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
5楼-- · 2019-02-17 00:34

Most important

Keep in mind that relative URLs are resolved from the URL of your stylesheet.

So it will work if folder images is inside the stylesheets folder.

From you description you would need to change it to either

url("../images/plaid.jpg")

or

url("/images/plaid.jpg")

Additional 1

Also you cannot have no selector..

CSS is applied through selectors..

Additional 2

You should use either the shorthand background to pass multiple values like this

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;
查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
6楼-- · 2019-02-17 00:41

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:

body {
    background-image: url(...);
}
查看更多
0人赞 添加讨论(0) 举报
祖国的老花朵
7楼-- · 2019-02-17 00:41 
    <style>
    background: url(images/Untitled-2.fw.png);
background-repeat:no-repeat;
background-position:center;
background-size: cover;
    </style>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)