Custom image bullet points

[lunalisa]

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/

[Paulie_D]

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.

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

[Paulie_D]

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.

[lunalisa]

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?

[Paulie_D]

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

[lunalisa]

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 :)

[Author]

Posts