Saturday, September 29, 2012

JqueryUImobile: Why can't see bkgnd image from the CSS for body tag

Why can't see bkgnd image from the CSS for body tag,
or for large container level tag,

or even bkgnd-color = #ff0000; red ???

like so







#div_body {
    background: url("static/bg-body.jpg") repeat scroll 0 0 transparent !important;


}


This doesn't work (#div_body) because the div only as big as its child divs and content
if all the child divs fitted in, they will all be over the bkground.

consider putting it to body tag instead?
Try verify with firebug...


ROOT CAUSE:
Commenting out this line

<!--        <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> -->

will allow the background: image you set in your CSS to not be overriden by the one from the JS.
The purpose of the JS is to keep your images resized to the mobile screen's view.

If you comment out the JS, you'll get the background you want and specified,
but your image(s) will be full width, horiz scrollbar out of the mobile device's width.



Because, therefore.






GENERAL RULE OF THUMB/SOLUTION:
If you know for sure something will happen some way, when you do raw html/css,
and it doesn't come out as expected,
comment out all framework css and js. Especially the js.

Then you know it's the framework you are using, clobbering your stuff.

Rather xxx yyyyy than to find out these kind of time wasting problems.









No comments:

Post a Comment