Style
  • element with CSS background, to show only a part of images

  • Tags: html,css,html-lists

    Problem :

    Can anyone help me with list.

    I have an image: enter image description here

    And now I need to build list with default bulls replaced with left side arrow (but not with whole image):

    enter image description here

    How I can achive it using cross-browser css?

    My HTML markup is:

    <ul>
        <li><a href="#">Conveniently located on Adelaide St. W, one block east of the Bathurst   and Adelaide intersection, just north of the Gardiner Expressway, downtown Toronto.</a></li>
        <li>All units are located indoors, which means they are all climate controlled.</li>
        <li>There is an indoor loading dock with four bays, two of which are large enough to accommodate up to 50' trailers.</li>
        <li>Complimentary use of on-site dollies and pallet truck.</li>
    </ul>
    


    Solution :

    I guess this is what you were asking for.

    Check out this fiddle

    Here is the code

    The HTML is the same.

    The CSS

    ul {
        list-style: disc inside none;
    }
    
    ul li:before {
        position: absolute;
        content: "";
        left: 8px;
        background: url('http://i.stack.imgur.com/KKMcz.png') no-repeat #fff;
        width: 8px;
        height: 14px;
    }
    

      CSS Howto..

      How can I make a div element float left after another float left while still filling the rest of the parent's width?

      How to get the element background image in html using javascript

      How to display a dynamic rating based on css and the value from PHP? [closed]

      how to use querySelector to select dynamic added elements

      How would I call :parent for this tooltip?

      How to define exceptions for the Third occurence of a DIV?

      How to correctly impose a background-color to a div wrapping article and aside in HTML/CSS?

      How to avoid AjaxMin removal for IE9 and below CSS hack

      Chrome doesn't show the favicon

      Showing an hidden element with an opacity-animation

      how to to set chat box based on user id using css

      How is padding-top as a percentage related to the parent's width?

      How to Add Another Instance of Date picker in given Code

      How can a transformed Image transition back to it's original shape when hovered?

      How to fix text with limited height and absolute position overflows

      How to detect clicks outside of a css modal? [duplicate]

      How to properly separate pages in jQuery Mobile?

      how to get text aligned vertically with text in list using css

      JS/CSS: How to change z-index value after scrolling down past 1200 pixels (in height)?

      How I can set a different font size for my text by css?

      How to use non-online images in CSS?

      How to reference a .css file on a razor view?

      How to remove all the borders of a selectbox?

      How to make UL Tabs with only HTML CSS

      How to put a space between the hover effect in this situation css html php?

      Bootstrap CDN + WP // How to edit '.css’

      How to get rid of spaces between images in CSS?

      How can I animate the drawing of text on a web page?

      How to create profession box shadow effect in div using css

      CSS how to change text color of disabled option inside a select?