CODEWITHSUNDEEP
css
Rajeshwar
Rajeshwar

Reputation: 11651

CSS - Div background Image not being displayed

I am attempting to display a background non-repeated picture on the top right corner of my div. I am using the following code

<html>
    <head>
    <style>
       .UseA
           {
             display:block;

             /* Display image in the top left corner */
             background-image:url('paper.gif');
             */--------------------------------------*/

             text-indent:10px;
             border-radius: 10px;
             background: #BADA55;
             min-height:50px;
             width:300px;

           }
           .UseA .dta
           {
             display:block;
             border-radius: 10px;
             width:130px;
             background-color:grey;
             color:white;
             position:relative; /*Relative to normal position*/
             left:160px; /*Move away from left*/
           }
    </style>
    </head>
  <body>    

        <div class="UseA">
                Hello , My name is Jim 
                         <div class="dta">something here</div>
        </div>

  </body>
 </html>

However The image is not being displayed. I am trying this code out here Any suggestions on what I might be doing wrong ?

Upvotes: 0

Views: 192

Answers (3)

davidpauljunior
davidpauljunior

Reputation: 8338

You declare background: #BADA55; after background-image, so it's overwriting it. Try this instead:

UseA {
  display:block;
  text-indent:10px;
  border-radius: 10px;
  background: #BADA55 url('paper.gif') no-repeat top right;
  min-height:50px;
  width:300px;
}

Upvotes: 1

JerryHuang.me
JerryHuang.me

Reputation: 1790

If your papaer.gif asset is correct, then remove your background color for .UseA

      .UseA
       {
         display:block;

         /* Display image in the top left corner */
         background-image:url('paper.gif');
         */--------------------------------------*/

         text-indent:10px;
         border-radius: 10px;
         background: #BADA55;
         min-height:50px;
         width:300px;

       }

Change to

.UseA      
{
         display:block;

         /* Display image in the top left corner */
         background-image:url('paper.gif');
         */--------------------------------------*/

         text-indent:10px;
         border-radius: 10px;
         min-height:50px;
         width:300px;

       }

Sample on Fiddle using Google image as a background: http://jsfiddle.net/C9qdL/

Upvotes: 0

isherwood
isherwood

Reputation: 61056

You're overwriting background-image with background. Combine them:

http://jsfiddle.net/isherwood/ANr6K/

background: url('image.png') right top no-repeat #BADA55;

Upvotes: 0

Related Questions