CSS background All In One

img {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaWQ9InN2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj4KICAgICAgICA8dGV4dCB4PSIyNSIgeT0iNTAiIGZpbGw9IiMwMGZmMDAiPnhncWZybXM8L3RleHQ+CiAgICA8L3N2Zz4=) left 5% / 15% 60% repeat;
}



img {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaWQ9InN2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj4KICAgICAgICA8dGV4dCB4PSIyNSIgeT0iNTAiIGZpbGw9IiMwMGZmMDAiPnhncWZybXM8L3RleHQ+CiAgICA8L3N2Zz4=);
    background-position-x: left;
    background-position-y: 5%;
    background-size: 15% 60%;
    background-repeat-x: repeat;
    background-repeat-y: repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}

background-position & background-size

.bg{
    background: left 5% / 15% 60% repeat;
   /* background 简写等价于 */
    background-position-x: left;
    background-position-y: 5%;
    background-size: 15% 60%;
    background-repeat-x: repeat;
    background-repeat-y: repeat;
}

.bg{
    background: center / 50% repeat;
   /* background 简写等价于 */
    background-position-x: center;
    background-position-y: center;
    background-size: 50%;
    background-repeat-x: repeat;
    background-repeat-y: repeat;
}