Forums

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
    Posts
  • #239053
    lunalisa
    Participant

    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(http://health.lunaink.com.au/wp-content/uploads/2016/03/Brown_bullet_small.png) no-repeat;
        padding-left: 40px;
        margin-bottom: 40px;
        background-size: contain;
    }
    

    http://health.lunaink.com.au/products/bpro/

    #239061
    Paulie_D
    Moderator

    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;
    
    #239062
    Chris Coyier
    Keymaster

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

    https://css-tricks.com/almanac/properties/l/list-style/

    #239063
    Paulie_D
    Moderator

    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.

    #239069
    lunalisa
    Participant

    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?

    #239080
    Paulie_D
    Moderator

    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:

    http://codepen.io/Paulie-D/pen/mPrEmR

    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

    #239146
    lunalisa
    Participant

    Fantastic!

    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)
  • The forum ‘CSS’ is closed to new topics and replies.