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>
This question is related to
jquery
css
background
stylesheet
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).
<style>
background: url(images/Untitled-2.fw.png);
background-repeat:no-repeat;
background-position:center;
background-size: cover;
</style>
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(...);
}
Try this:
body
{
background:url("images/plaid.jpg") no-repeat fixed center;
}
jsfiddle example: http://jsfiddle.net/Q9Zfa/
You may debug using two ways:
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".
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 !!.
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;
Source: Stackoverflow.com