Menu
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>
395
asked Dec 19 '12 03:12
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).
82
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
