1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Adding Image Ranks.

Discussion in 'Styling and Customization Questions' started by mrchasez, Apr 12, 2012.

  1. mrchasez

    mrchasez Active Member

    I use CSS to give my ranks some what of a "tag" look.
    I want a premium rank to have this image http://glock.pro/images/premium_rank.png
    But i dont know how.

    Currently what i do is:

    Use the following user title:
    <div class="owner"> Owner</div>

    Then in extra.css i have
    .owner {
    background-color: #A00000 ;
    border: 1px solid #680000 ;
    border-radius: 4px;
    padding: 4px;
    margin: 4px 0;
    text-align: center;
    color: yellow;

    Which is ok, however it's not really want i want.
    I want to use image ranks.
    So how do i do this?
     
  2. Floris

    Floris Guest

    background-image: url();
     
  3. mrchasez

    mrchasez Active Member

    Can you give me a full example using the image provided, and where it goes
     
  4. Floris

    Floris Guest

    Instead of css for text, you can also just make a block with the image as a background.
    So you can just re-use what you have. Just have no content in it, and set a width.
     
  5. mrchasez

    mrchasez Active Member

    Example..?
     
  6. RobParker

    RobParker Well-Known Member

    He just means take your example, remove the Owner text and add a background image to the CSS

    <div class="owner"></div>

    .owner {
    background-color: #A00000 ;
    background-image: url();
    border: 1px solid #680000 ;
    border-radius: 4px;
    padding: 4px;
    margin: 4px 0;
    text-align: center;
    color: yellow;
    }
     
  7. mrchasez

    mrchasez Active Member

    If i have an image rank why on earth would i need or use this

    background-color: #A00000 ;
    border: 1px solid #680000 ;
    border-radius: 4px;
    padding: 4px;
    margin: 4px 0;
    text-align: center;
    color: yellow;

    That defeats the purpose of the image rank
     
  8. RobParker

    RobParker Well-Known Member

    I left that in as I didn't know if you wanted a border, padding, etc. Obviously remove what you don't want/need.
     
  9. mrchasez

    mrchasez Active Member

  10. RobParker

    RobParker Well-Known Member

    background-image:url('image.gif');
     

Share This Page