1
0
mirror of https://github.com/Damillora/Yuika synced 2024-11-22 09:17:33 +00:00

fix(theme): try to fix background url

This commit is contained in:
Damillora 2021-04-14 19:04:44 +07:00
parent 917b57f504
commit 2e2f648677
2 changed files with 4 additions and 19 deletions

View File

@ -17,26 +17,19 @@ for it, and apply those styles to the <header> tag. Else, we just output a <head
.responsive-header-img { .responsive-header-img {
background-image: url({{img_url background size='xl'}}); background-image: url({{img_url background size='xl'}});
background-size: cover; background-size: cover;
background-position: center;
} }
@media(max-width: 1000px) { @media(max-width: 1000px) {
.responsive-header-img { .responsive-header-img {
background-image: url({{img_url background size='l'}}); background-image: url({{img_url background size='l'}});
background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x, background-position: center;
url({{img_url background size='xl'}}) 2x);
background-image: image-set(url({{img_url background size='l'}}) 1x,
url({{img_url background size='xl'}}) 2x);
} }
} }
@media(max-width: 600px) { @media(max-width: 600px) {
.responsive-header-img { .responsive-header-img {
background-image: url({{img_url background size='m'}}); background-image: url({{img_url background size='m'}});
background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x, background-position: center;
url({{img_url background size='l'}}) 2x);
background-image: image-set(url({{img_url background size='m'}}) 1x,
url({{img_url background size='l'}}) 2x);
} }
} }
</style> </style>
@ -44,4 +37,4 @@ for it, and apply those styles to the <header> tag. Else, we just output a <head
{{else}} {{else}}
{{/if}} {{/if}}

View File

@ -22,10 +22,6 @@ for it, and apply those styles to the <header> tag. Else, we just output a <head
@media(max-width: 1000px) { @media(max-width: 1000px) {
.responsive-site-header-img { .responsive-site-header-img {
background-image: url({{img_url @site.cover_image size='l'}}); background-image: url({{img_url @site.cover_image size='l'}});
background-image: -webkit-image-set(url({{img_url @site.cover_image size='l'}}) 1x,
url({{img_url @site.cover_image size='xl'}}) 2x);
background-image: image-set(url({{img_url @site.cover_image size='l'}}) 1x,
url({{img_url @site.cover_image size='xl'}}) 2x);
background-position: right 25% top 20%; background-position: right 25% top 20%;
} }
} }
@ -33,10 +29,6 @@ for it, and apply those styles to the <header> tag. Else, we just output a <head
@media(max-width: 600px) { @media(max-width: 600px) {
.responsive-site-header-img { .responsive-site-header-img {
background-image: url({{img_url @site.cover_image size='m'}}); background-image: url({{img_url @site.cover_image size='m'}});
background-image: -webkit-image-set(url({{img_url @site.cover_image size='m'}}) 1x,
url({{img_url @site.cover_image size='l'}}) 2x);
background-image: image-set(url({{img_url @site.cover_image size='m'}}) 1x,
url({{img_url @site.cover_image size='l'}}) 2x);
background-position: right 25% top 20%; background-position: right 25% top 20%;
} }
} }
@ -44,4 +36,4 @@ for it, and apply those styles to the <header> tag. Else, we just output a <head
{{else}} {{else}}
{{/if}} {{/if}}