0

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 ?

3

3 Answers 3

1

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;
}
0

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

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

background: url('image.png') right top no-repeat #BADA55;
1
  • Did the trick - Marked as answer for proposing how to set background color as well
    – Rajeshwar
    Nov 19, 2013 at 22:42
0

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.