background-image property

Question

I can't seem to get the background-image property to work. I am trying to add images to the borders of my button, but it is not working. Here is the http://jsfiddle.net/Bchga/ .

HTML

<a href="#" class="btn">Image Borders</a>

CSS

a {
    text-decoration: none;
    color: #fff;
}

.btn {
    float: left;
    display: block;
    padding: 10px 30px;
    background-color: #67b8de;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png") no-repeat right bottom;
}

Answer 1

Your background-image rule also contains values for background-repeat and background-position . Separate them (or you can put the colour in too and use the background shorthand):

background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png");
background-repeat: no-repeat;
background-position: right bottom;

Answer 2

Okay I went over the documentation on https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

The new CSS

.btn {
    float: left;
    display: block;
    padding: 10px 30px;
    /* Notice that I list all the images */
    background: url("../img/border-top-left.png"), url("../img/border-top-right.png"),
                url("../img/border-bottom-left.png"), url("../img/border-bottom-right.png");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top left, top right, bottom left, bottom right;
    background-color: #67b8de;
}

You will notice that I use the background: property, you can also use the background-image property, thanks for the tip minitech . You also should notice that you can't just specify individual image is you want to target all the corners of the button. Example:

background-image: url("../img/border-blah-blah.png");
background-repeat: no-repeat;
background-position: top right;

This will not target all of your corners, but only one corner will be targeted this is because of the cascade it will overwrite the previous rule, that's why you have to input the sources for all your images at once and then target them. Also you should put the background-color property last, because the color won't be applied if it is the first rule. I don't know why that happens.

Answer 3

您的背景图片过大：正在处理10％的背景图片。.： 链接JSFiddle

    background: #ff8844 url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png") 10%