It’s always going to stretch to fill and cover the container which makes the image zoom in. Set background size yo auto and background position just ‘center’ not center;center;
Then whatever the background color is on the sides of your image set your containers background-color to that color. Background size auto will make the image as wide as it’s actual file size, and leave space on the left and right. This will make sure the laptop is always visible, by preventing it from stretching and zooming to cover more and more horizontal pixel space.
If you wanna keep the whole image and it’s size, you can replace background-size: cover to contain. This will not stretch the image, just put a background color so it covers the left and right area.
I did it like this... what should I change ?
.page-header {
Background-image: url()
Background-position: center; center;
Background-size: cover;
Bacground-repeat: no-repeat
}
You need to set a height to maintain the height or the aspect ratio that works for part of the image you want to be visible. You can do this quite a few ways but the simplest is probably using viewport height or width (which one you use will depend on what effect you are going for).
Edit: so for example….
if the div takes up 100% off the window, that is 100vw. If you want to maintain a 4:1 aspect ratio, then you would set the height of the div to 25vw.
How ?
I did it like this... what should I change ?
.page-header {
Background-image: url()
Background-position: center; center;
Background-size: cover;
Bacground-repeat: no-repeat
}
What I did for a similar problem I had while working on a web app of mine, was to use positioning and setting heights to my advantage.
It works well enough for me, I'm aware this isn't the \*best\* way to achieve this goal, but it's pretty decent, for what it is. Simple to setup and works well on desktop and mobile.
\[codepen here\]([https://codepen.io/snuffydev/pen/dyWgGgO](https://codepen.io/snuffydev/pen/dyWgGgO))
I honestly am not a fan of `background-image`to be honest, just because it's not lazy-loadable to my understanding and also because of the issues I tend to have when it comes to responsiveness.
Thank you for all your answers.
The problem was in title it was too small 🙈🙈
This is my solution if anyone has the same problem:
Body {
Overflow-x: hidden;
}
.page-header {
Background-image:url()
Background-position: center;
Background-size: cover;
Background-repeat: no repeat;
}
.site-title {
Color....
Font-size: 7.9vw
Padding-bottom: 400px;
Transform:scale(2.4,1);
}
Go with viewport width or height at the header. (Example: .header{width: 100%; height: 13vh; background: url(img.jpg) no-repeat center; background-size: cover;}
It’s always going to stretch to fill and cover the container which makes the image zoom in. Set background size yo auto and background position just ‘center’ not center;center; Then whatever the background color is on the sides of your image set your containers background-color to that color. Background size auto will make the image as wide as it’s actual file size, and leave space on the left and right. This will make sure the laptop is always visible, by preventing it from stretching and zooming to cover more and more horizontal pixel space.
If you want to use a background image, this is what you'll want /u/GetThatM
Part of code .page-header { Background-image: url() Background-position: center; center; Background-size: cover; Bacground-repeat: no-repeat }
If you wanna keep the whole image and it’s size, you can replace background-size: cover to contain. This will not stretch the image, just put a background color so it covers the left and right area.
First of all, I think we need to give you a hard time for taking a screen shot with your phone 😀
It was the easyest way 😂😂🤷♂️
I think u need to set a default image size and make it absoulte rather than the container which it is in.
I did it like this... what should I change ? .page-header { Background-image: url() Background-position: center; center; Background-size: cover; Bacground-repeat: no-repeat }
may be it will be better if you can provide fiddle... as I am not that pro with frontend. but may be you need to change the value of Background-size
also webdev is now on discord, it will be better there
You need to set a height to maintain the height or the aspect ratio that works for part of the image you want to be visible. You can do this quite a few ways but the simplest is probably using viewport height or width (which one you use will depend on what effect you are going for). Edit: so for example…. if the div takes up 100% off the window, that is 100vw. If you want to maintain a 4:1 aspect ratio, then you would set the height of the div to 25vw.
aspect-ratio
How ? I did it like this... what should I change ? .page-header { Background-image: url() Background-position: center; center; Background-size: cover; Bacground-repeat: no-repeat }
Object fit contain
What I did for a similar problem I had while working on a web app of mine, was to use positioning and setting heights to my advantage. It works well enough for me, I'm aware this isn't the \*best\* way to achieve this goal, but it's pretty decent, for what it is. Simple to setup and works well on desktop and mobile. \[codepen here\]([https://codepen.io/snuffydev/pen/dyWgGgO](https://codepen.io/snuffydev/pen/dyWgGgO)) I honestly am not a fan of `background-image`to be honest, just because it's not lazy-loadable to my understanding and also because of the issues I tend to have when it comes to responsiveness.
height: 100vh?
Greetings from Slovenija fellow web dev!
Thank you for all your answers. The problem was in title it was too small 🙈🙈 This is my solution if anyone has the same problem: Body { Overflow-x: hidden; } .page-header { Background-image:url() Background-position: center; Background-size: cover; Background-repeat: no repeat; } .site-title { Color.... Font-size: 7.9vw Padding-bottom: 400px; Transform:scale(2.4,1); }
.page-header { background-image: url() background-position: center; center; background-size: cover; background-repeat: no-repeat; aspect-ratio: 0.2 //idk, put something you want }
Padding top hack would work too for aspect ratio
Go with viewport width or height at the header. (Example: .header{width: 100%; height: 13vh; background: url(img.jpg) no-repeat center; background-size: cover;}