Hello everyone. I am trying to use an image for a bullet point on my site, but I also want to move the image, depending on the amount of text. As it is now, it is set up so that a small image sits imediatedly to the left of the top line of text. I want to make it so I can use a larger image, and that image will be to the left of the entire text of the list item, say for example if there is three lines of text, the image would sit to the left of those three lines.

On the page itself I have this code:

<li style="list-style-image: url('http://address of the image.jpeg'); text-align: left; font-size: 16px; line-height: 1.5; margin: 10px 100px 10px 0;">text is placed here.</li>

I have not been able to find the corresponding styling in my style.css file. I will past the section of the stye.css for the lists here:

ul {
list-style: square;
margin: 0 0 18px 1.5em;
}
ol {
list-style: decimal;
margin: 0 0 18px 1.5em;
}
ol ol {
list-style: upper-alpha;
}
ol ol ol {
list-style: lower-roman;
}
ol ol ol ol {
list-style: lower-alpha;
}
ul ul,
ol ol,
ul ol,
ol ul {
margin-bottom: 0;
}
dl {
margin: 0 0 24px 0;