CODEWITHSUNDEEP
javascriptjqueryhtmlcsscordova
C Sharper
C Sharper

Reputation: 8646

css not getting applied due to external css inclusion

I am designing application in phonegap.

I have externally included following css:

 <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />

<link rel="stylesheet" href="css/bootstrap.min.css">

In design i want body to have one background image.

For that i have done following:

<style>
            /*this block should go in the styles.css file*/
        .ui-panel-inner {
            padding:0px; /*make the buttons flush edge to edge*/
        }
        .ui-controlgroup {
            margin:0; /*make the buttons flush to the top*/
        }
        #header {
            height:54px;
        }
        #bars-button {
            margin:7px;
        }

        .bodyCSSBG
        {
background-image:url("ProjectImages/aboutUsBackground.JPG");
            background-repeat:no-repeat;
            background-size:cover;
        }


    </style>

In body:

<body class="bodyCSSBG">

But background image is not getting aaplied to page.

If i remove external css as:

<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />

Then background image gets applied.

What can i do in this case??

EDIT1:

written !Important as:

enter image description here

Upvotes: 0

Views: 57

Answers (3)

dip
dip

Reputation: 1261

What is sequence of adding css files. Make sure to include your CSS at end to overwritten changes you have done in your custom CSS.

Upvotes: 0

Mitch
Mitch

Reputation: 21

Is the tag in the External CSS? If so, there is no need for a tag.

In External CSS Files you just write the CSS

Upvotes: 0

Confused
Confused

Reputation: 1662

Use

!important

.bodyCSSBG
    {
 background-image:url("ProjectImages/aboutUsBackground.JPG") !important;
        background-repeat:no-repeat;
        background-size:cover;
    }

Upvotes: 1

Related Questions