CODEWITHSUNDEEP
htmlcss
Yecats
Yecats

Reputation: 1815

How do you Add an image to the left side of a div

I want to have an image appear on the left side of the div (centered vertically). How is this done?

This is the code that I have. (The image appears very tiny in each of the corners. I have tried background url(../images/error24x24.png) no repeat; but that didn't work right either. (The image loaded, but it looked funky)

.formValidation {
    background-color:rgb(71,89,32);
    color:white;
    font-weight:bold;
    padding:10px;
    -moz-border-radius:6px;
    border-radius:6px;
    -webkit-border-image: url(../images/error24x24.png);
    border-image: url(../images/error24x24.png);
}

    <div class="formValidation">
        Please enter a category.
    </div>

EDIT: My final CSS:

.formValidation {
    background-color:rgb(52,31,36);
    color:white;
    font-weight:bold;
    padding:10px 10px 10px 35px;
    -moz-border-radius:15px;
    border-radius:15px;
    margin-bottom:10px;
    background-image: url(../images/error24x24.png);
    background-position:8px center;
    background-repeat:no-repeat;
}

Upvotes: 2

Views: 2701

Answers (1)

Gabe
Gabe

Reputation: 329

Use background-image and background-position instead of border-image.

Here's a good place to start with: http://coding.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/

Check MDN for a comprehensive documentation: https://developer.mozilla.org/en-US/docs/CSS/background

Upvotes: 1

Related Questions