CSS background All In One

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;
}

demo

refs

https://cdn.xgqfrms.xyz/logo/favicon.png

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

https://developer.mozilla.org/en-US/docs/Web/CSS/background

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---