How can I have the hero image be display full width without cropping on both sides?
this is the media query Im currently using. I'm not an experienced coder:
@media (min-width: 768px) and (max-width: 1024px) {
#hero-section {
background-size: cover !important;
background-position: center top !important;
height: min(100vh, 150vw);
}
and this one so the image wont be zoomed in on larger tablet screens such as 1600 x 2560 Tablet
@media (min-width: 1025px) and (min-height: 1201px) {
.elementor-section #hero-section {
7 Replies
Can you post the website? I'm not able to help at the moment but someone else might if we have the live site and more context of what you need to do
Be sure to read #Asking Good Questions so you can learn how to properly format code blocks
-# among everything else that post teaches
You can just do
background:url(path/to/image.png) top center / 100% auto no-repeat; and now it should no longer crop the sides of the imagehttps://codepen.io/tok124/pen/ZYbowvw
There you have an example
@Tok124 (CSS Nerd) thank you.
are you familiar with wordpress, elementor.? I will like to add to this builder, and wondering if this setting will work on that interface.
Nah, i have not used wordpress for like the last 10 years or something 😂 and never used elementor
thanks! a lot. You guys are so amazing at coding, I wish I can get there 😊 one day! lol!