JQuery mobile adding own CSS

Question

I want to add a background image for my JQuery mobile page and I have my external CSS. The background image only appears if I remove the JQuery scripts. How could I continue using my own css without the JQuery scripts interfering? I would also like to use the JQuery buttons etc using my CSS

HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Find me</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/
jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/
jquery.mobile-1.4.5.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/findme.css">
  </head>
  <body>
    <!-- background not showing up here -->
  </body>
</html>

External CSS

body {
    background-image: url("../images/bg.jpg");
    background-repeat:no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-position: center center;
    background-attachment: fixed;
}

you could use !important in your rules.

vanntile
– vanntile

2015-11-22 15:07:14 +00:00
Commented Nov 22, 2015 at 15:07 — vanntile
– vanntile, Commented Nov 22, 2015 at 15:07

jcarrera · Accepted Answer · 2015-11-23 08:43:17Z

1

You can try changing "body" selector to ".ui-page" selector in your css file and adding !important:

.ui-page {
    background-image: url("../images/bg.jpg") !important;
    background-repeat:no-repeat !important;
    -webkit-background-size:cover !important;
    -moz-background-size:cover !important;
    -o-background-size:cover !important;
    background-size:cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
}

I hope this helps you!

answered Nov 23, 2015 at 8:43

jcarrera

1,0661 gold badge17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tao · Accepted Answer · 2015-11-22 15:56:45Z

1

Leave the scripts in place.
Load the page and inspect the body element.
Find out what CSS rule gives it the background-image property.
Build a stronger CSS selector in your own CSS.

If you have any trouble with the steps above:

Replicate your problem in a jsfiddle and update your question, I'll build the selector for you.

UPDATE:

Neither of the following resources

https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css,
https://code.jquery.com/jquery-1.10.2.min.js
https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js

are setting the background-image property of the body element. This means that it is set inside the css/findme.css which you have not provided.

Please add the contents of css/findme.css in this jsfiddle, save it and update your question with the resulting link.

edited Nov 22, 2015 at 15:56

answered Nov 22, 2015 at 15:07

tao

91.1k18 gold badges136 silver badges174 bronze badges

4 Comments

user122938221 Over a year ago

I just want to know how you can change the styling, like an example

tao Over a year ago

@user122938221: Basics. Examples.

tao Over a year ago

If you have trouble adding CSS to your page, read this.

user122938221 Over a year ago

Ive used the selector and the background image still doesn't appear

nathanhleung · Accepted Answer · 2015-11-22 15:57:16Z

0

It looks like one of your scripts is overriding the body styles. You could create a background div that covers the body to simulate a full-page background, though.

Example HTML:

<body>
  <div id="background">
  </div>
</body>

Example CSS:

html, body {
  height: 100%;
  width: 100%;
  background: transparent;
}

#background {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url("../images/bg.jpg");
    background-repeat:no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-position: center center;
    background-attachment: fixed;
}

edited Nov 22, 2015 at 15:57

answered Nov 22, 2015 at 15:36

nathanhleung

5166 silver badges15 bronze badges

5 Comments

user122938221 Over a year ago

For some reason the background image still doesn't appear

user122938221 Over a year ago

It does when I add content

nathanhleung Over a year ago

instead of min-height, try just height - the background div will be at minimum the height of the body. also, add the html element to the selector

user122938221 Over a year ago

Its only when I add content inside the <div> the background image appears and depending on how much content too, it displays it bit by bit. By default when the page loads the image doesn't appear

nathanhleung Over a year ago

Instead, we can make it a fixed position element

Collectives™ on Stack Overflow

JQuery mobile adding own CSS

3 Answers 3

Comments

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related