I'm having a problem putting an image in the background of a div.
My image is 496px x 421px. In the html I have this (Ignore the angular tags):
<div class="body">
<!--Componentes y codigo de angular-->
<div class="header">
<div class="logo-grassi"></div>
<!--Componentes y codigo de angular-->
</div>
<!--Componentes y codigo de angular-->
</div>
Inside the div with class "logo-grassi" and "header" I apply the following css styles:
@media only screen and (min-width: 1024px) {
.header {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 32px;
position: static;
left: 0px;
margin-top: 100px;
}
}
@media only screen and (min-width: 1024px) {
.logo-grassi {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
width: 25%;
height: 25%;
left: 15%;
top: 25%;
background-image: url("./../../../../../assets/images/splash.svg");
background-size: 100% 100%;
background-repeat:no-repeat;
background-size: cover;
}
}
It is displayed as follows:
If I change in the width and heightt the percentages by the pixels of the image this happens:
.logo-grassi{
...
width: 496px;
height: 421px;
...
}
In this case, the screen is displayed as I expect THE IMAGE IS DESIGNED FOR THIS SCREEN SIZE (1920px wide) The problem is that when I shrink the screen, as the div has a fixed size of 496px, it does not shrink and it looks ugly .
I found the solution, I just removed the property from
background-size: cover;
it and now it displays correctly.I made some modifications based on the code, you did. In this example the image I use is 450px
https://picsum.photos/450
and I had to remove themedia query
for the example to run.You can include everything in a single media;
@media only screen and (min-width: 1024px) {
.