How to make background-position and background-size responsive by using percentages in css?

I want to avoid hardcoding values for background-position and background-size with pixels and I’m trying to set both using percentages. However, if I make it work on one viewport size, say desktop, things work unexpected on tablet/mobile viewport size – that is, I need to use different values for the y-coordinate of background-position for different viewport width in order to retain the same position (otherwise image disappears as the viewport gets narrow). In the below code I use percentages for the green card only, the rest are just for demo purposes.

How can I have a single value for the y-part of background-position for all screen sizes without writing media queries with some magic values and maintain the same background image position?

Please run the snippet in full page mode and resize the window to reproduce.

Expected behaviour on smaller screen sizes (background-position-y is 132% on the screenshot, whereas I use 200% in the example):

.section {
    padding-block: 5rem
}

.container {
    --padding: 2rem;
    --max-width: 70rem;
    margin-inline: auto;
    width: min(100% - var(--padding), var(--max-width))
}

.flow>:where(:not(:first-child)) {
    margin-top: var(--flow-spacer, 1rem)
}

.bg-brand-accent-100 {
    background-color: #9ffeeb
}

.bg-yellow-300 {
    background-color: #ffe2b8
}

.bg-pink-300 {
    background-color: #f7b5cb
}

.bg-cyan-300 {
    background-color: #9fe8fe
}

.card {
    border-radius: 1rem;
    box-shadow: none;
    display: grid;
    gap: .5rem;
    line-height: 1.7;
    padding: 1.5rem
}

.card,
.card__heading {
    color: #404040;
    font-family: system-ui
}

.card__heading {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: none
}

.offset-grid {
    display: grid;
    gap: 1.5rem
}

@media screen and (min-width:45em) {
    .offset-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .offset-grid>:nth-child(4n+2),
    .offset-grid>:nth-child(4n+3) {
        grid-column: span 2
    }
}

.offset-grid p {
    max-width: 32ch
}

.offset-grid a {
    text-decoration: underline
}

.feature-cards>:first-of-type {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='51' viewBox='0 0 60 51' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M55.1596 0.578125H38.3839C36.7562 0.578125 35.1509 0.957499 33.695 1.6862C32.2391 2.41491 30.9727 3.47292 29.9961 4.77647C29.0195 3.47292 27.7531 2.41491 26.2972 1.6862C24.8414 0.957499 23.236 0.578125 21.6083 0.578125H4.8327C3.72041 0.578125 2.65367 1.02045 1.86716 1.80779C1.08065 2.59513 0.638794 3.663 0.638794 4.77647V38.3632C0.638794 39.4767 1.08065 40.5446 1.86716 41.3319C2.65367 42.1192 3.72041 42.5616 4.8327 42.5616H21.6083C23.2768 42.5616 24.8769 43.225 26.0566 44.4061C27.2364 45.5871 27.8992 47.1889 27.8992 48.8591C27.8992 49.4158 28.1201 49.9497 28.5134 50.3434C28.9066 50.7371 29.44 50.9583 29.9961 50.9583C30.5523 50.9583 31.0856 50.7371 31.4789 50.3434C31.8722 49.9497 32.0931 49.4158 32.0931 48.8591C32.0931 47.1889 32.7559 45.5871 33.9356 44.4061C35.1154 43.225 36.7155 42.5616 38.3839 42.5616H55.1596C56.2718 42.5616 57.3386 42.1192 58.1251 41.3319C58.9116 40.5446 59.3535 39.4767 59.3535 38.3632V4.77647C59.3535 3.663 58.9116 2.59513 58.1251 1.80779C57.3386 1.02045 56.2718 0.578125 55.1596 0.578125ZM21.6083 38.3632H4.8327V4.77647H21.6083C23.2768 4.77647 24.8769 5.43995 26.0566 6.62097C27.2364 7.80198 27.8992 9.40378 27.8992 11.074V40.4624C26.086 39.0966 23.8775 38.3596 21.6083 38.3632ZM55.1596 38.3632H38.3839C36.1148 38.3596 33.9062 39.0966 32.0931 40.4624V11.074C32.0931 9.40378 32.7559 7.80198 33.9356 6.62097C35.1154 5.43995 36.7155 4.77647 38.3839 4.77647H55.1596V38.3632ZM38.3839 11.074H48.8687C49.4248 11.074 49.9582 11.2951 50.3515 11.6888C50.7447 12.0825 50.9656 12.6164 50.9656 13.1732C50.9656 13.7299 50.7447 14.2638 50.3515 14.6575C49.9582 15.0512 49.4248 15.2723 48.8687 15.2723H38.3839C37.8278 15.2723 37.2944 15.0512 36.9012 14.6575C36.5079 14.2638 36.287 13.7299 36.287 13.1732C36.287 12.6164 36.5079 12.0825 36.9012 11.6888C37.2944 11.2951 37.8278 11.074 38.3839 11.074ZM50.9656 21.5698C50.9656 22.1266 50.7447 22.6605 50.3515 23.0542C49.9582 23.4479 49.4248 23.669 48.8687 23.669H38.3839C37.8278 23.669 37.2944 23.4479 36.9012 23.0542C36.5079 22.6605 36.287 22.1266 36.287 21.5698C36.287 21.0131 36.5079 20.4792 36.9012 20.0855C37.2944 19.6918 37.8278 19.4707 38.3839 19.4707H48.8687C49.4248 19.4707 49.9582 19.6918 50.3515 20.0855C50.7447 20.4792 50.9656 21.0131 50.9656 21.5698ZM50.9656 29.9665C50.9656 30.5233 50.7447 31.0572 50.3515 31.4509C49.9582 31.8445 49.4248 32.0657 48.8687 32.0657H38.3839C37.8278 32.0657 37.2944 31.8445 36.9012 31.4509C36.5079 31.0572 36.287 30.5233 36.287 29.9665C36.287 29.4098 36.5079 28.8759 36.9012 28.4822C37.2944 28.0885 37.8278 27.8674 38.3839 27.8674H48.8687C49.4248 27.8674 49.9582 28.0885 50.3515 28.4822C50.7447 28.8759 50.9656 29.4098 50.9656 29.9665Z' fill='hsl(169, 100%, 41%)'/%3E%3C/svg%3E%0A");
    background-position: 125% 200%;
    background-repeat: no-repeat;
    background-size: 60% auto
}

.feature-cards>:first-of-type a {
    color: #0a5748
}

.feature-cards>:nth-of-type(2) a {
    color: #875812
}

.feature-cards>:nth-of-type(3) a {
    color: #791133
}

.feature-cards>:nth-of-type(4) a {
    color: #155d74
}

<section class="section">
      <div class="container flow">
        <div class="offset-grid | feature-cards">
          <div class="card | bg-brand-accent-100">
            <h3 class="card__heading">Content Creation</h3>
            <p>
              High-quality content that resonates with your audience and drives
              engagement.
            </p>
            <a href="#">Try now</a>
          </div>
          <div class="card | bg-yellow-300">
            <h3 class="card__heading">Targeted Advertising</h3>
            <p>
              Reach your ideal customers with precision through our targeted
              advertising campaigns.
            </p>
            <a href="#">Try now</a>
          </div>
          <div class="card | bg-pink-300">
            <h3 class="card__heading">Social Media</h3>
            <p>
              Let us handle your social media presence and engage with your
              audience on a personal level.
            </p>
            <a href="#">Try now</a>
          </div>
          <div class="card | bg-cyan-300">
            <h3 class="card__heading">Analytics</h3>
            <p>
              Stay on top of your campaign’s performance with our detailed
              analytics and reporting.
            </p>
            <a href="#">Try now</a>
          </div>
        </div>
      </div>
    </section>

Filed under: Kiến thức lập trình - @ 09:08

Thẻ: cssbackground-positionbackground-size

Thiết kế website giá rẻ

Danh mục

How to make background-position and background-size responsive by using percentages in css?