Tea Cozy - How to position the picture correctly?

Get Help CSS
#1

Hi,

I would like to position one picture in the same way as it’s positioned in the design spec but I don’t get it.

What I’m talking about is the background-picture of this.

The problem is not, to generally set the background-picture, however I don’t manage to set it like in the design spec.

Here the page.

Best wishes,

Chris

#2

Hi Chris,

I’m working on the same project.
Looking at your css I would think about the difference between “cover” vs “contain” - this article was helpful to me:

background-size | CSS-Tricks - CSS-Tricks.

John

1 Like
#3

Hey John,
Thanks for the nice article!
However I still don’t get it :sweat_smile:

#4

Hi Chris,

Using the Chrome Inspector tool I saw you have the following css for the background image:

section.locations {
margin-top: 4rem;
height: 500px;
width: auto;
background-image: url(https://github.com/ChristophGrothe/teacozy/blob/main/pics/Screenshot%202022-03-28%20at%2015-25-08%20img-locations-background.webp%20(WEBP-Grafik%201200%20×%20795%20Pixel)%20-%20Skaliert%20(70%).png?raw=true);
background-size: contain;
}

I think your “background-size: contain” statement makes the image repeat to fill the block. My initial thought would be to add “background-repeat: no-repeat” and keep “contain” but this doesn’t stretch the image and leaves a unsightly gap in the image area.

I think setting background-size to “cover” is the solution - this stretches the image to cover the area so no repeating will occur and no gaps show up. I did this in the inspector and it created a single image with no gaps. With that approach “background-repeat: no-repeat” seems unnecessary.

I suggest you try both of the approaches above and see how the image changes.

Let me know if this helps.
John

1 Like
#5

Hey John,
Thanks for your reply.
Unfortunately, if you use background-size: cover the result is this:

Unbenannte Präsentation
Unbenannte Präsentation960×540 48.3 KB

which is not what I want.

However I also asked in another forum and got a quite useful answer.

I played around a bit and the following code leads to the best result I was able to achieve:

section.locations {
    margin-top: 4rem;
    height: 22.73rem; /*500px*/
    width: 54.55rem;  /*1200px*/
    background-image: url("https://github.com/ChristophGrothe/teacozy/blob/main/pics/Screenshot%202022-03-28%20at%2015-25-08%20img-locations-background.webp%20(WEBP-Grafik%201200%20%C3%97%20795%20Pixel)%20-%20Skaliert%20(70%25).png?raw=true");
    background-size: auto 35rem;
    background-repeat: no-repeat;
    background-position: center 10%;
}

Best wishes,
Chris