The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Custom image bullet points

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #239053

    Hi all,

    I’ve created some custom bullet point images for a site.
    Got it to work all ok. But when the text wraps around the images are not remaining the same.

    This is what I have so far. (im using this in conjunction with beaver builder)

    .fl-builder-content .plus-brown ul > li {
        list-style-type: none;
        background: url( no-repeat;
        padding-left: 40px;
        margin-bottom: 40px;
        background-size: contain;


    It sounds like your background sizing might be the issue.

    I’d try a consistent background size and position…maybe

        background-position: left center;
        background-size: 26px 26px;
    Chris Coyier

    Might be worth trying the ol’ list-style-image just for kicks.


    list-style-image often has positioning issues of it’s own as I recall…although it’s certainly an option.

    Personally I would have gone with a pseudo-element and used the image as it’s background..or an SVG.

    More control overall.


    Thanks for the responses.
    I had tried list-style-image and thats when I ran into problems.

    That worked well what you suggested Paulie.

    Even though it worked how would I go about pseudo-element.
    Might be a better technique moving forward?

    Do you mean using the li:before?
    How could I go about implementing that in my code?


    Do you mean using the li:before?

    Yes…you just create a pseudo-element of the size you want, absolutely position it..and put the image as a background image to that.

    You get complete control over the size of the pseudo-element, it’s position and the size and position of the image within the pseudo-element.

    I’d size everything in em…that way it resizes based on the size of the list text.

    Something like:

    Here the image is always centered vertically regardless of the wrapping of the text…but you could have it at the top if you wanted just be changing the background-position



    Think moving forward thats the best option.
    Thanks so much for the the pen and your help.
    It’s made so much sense now :)

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.