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

Using css instead of background image

Discussion in 'Styling and Customization Questions' started by Andy.N, Sep 8, 2012.

  1. Andy.N

    Andy.N Well-Known Member

    I have a list that has a green square. I like to replace the image with css.
    Here is the current list


    Here is the CSS for the current list where the green square is called from background image and background-position.
    .hilite_list li a:link, .hilite_list li a:visited{ 
    background: url(images/spriteme1.png) no-repeat left 5px;
                            background-position: -10px -100px;
    color: #666;
    padding-left: 15px;
    line-height: 25px;
    Here is css for a simple square with solid color.
    .square {
    	width: 100px;
    	height: 100px;
    	background: #fc2e5a;
    Is it possible to replace the background-url with this css?
  2. MagnusB

    MagnusB Well-Known Member

    Andy.N likes this.
  3. Andy.N

    Andy.N Well-Known Member

    Thanks for the tip.
    I couldn't get the underline (border-bottom) to run from dt throughout dd since they are 2 different parts.
  4. MagnusB

    MagnusB Well-Known Member

    It should be possible, make sure there are no margins etc. You can do it with wrapping two <p> in a span as well, it doesn't really require you using any specific type of tag.

Share This Page