au246 Posted February 25, 2020 Share Posted February 25, 2020 Hello Folks, Newbie here, learning via w3schools.com. I think I'm missing something basic, but I can't figure it out.I'm using w3schools to create a hero image (via https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hero_image), but when I upload that code to my host, and then using different screen resolutions, the image is distorted. Viewing it on 1024x600, I see the hero image of the guy holding a camera, but if I view it on a much higher resolution, the image is "zoomed in" to the top left area of the picture. Here's the code, any help would be most appreciated: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body, html { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; } .hero-image { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.w3schools.com/howto/photographer.jpg"); height: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .hero-text { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; } .hero-text button { border: none; outline: 0; display: inline-block; padding: 10px 25px; color: black; background-color: #ddd; text-align: center; cursor: pointer; } .hero-text button:hover { background-color: #555; color: white; } </style> </head> <body> <div class="hero-image"> <div class="hero-text"> <h1 style="font-size:50px">I am John Doe</h1> <p>And I'm a Photographer</p> <button>Hire me</button> </div> </div> <p>Page Content..</p> </body> </html> Link to comment Share on other sites More sharing options...
Ingolme Posted February 26, 2020 Share Posted February 26, 2020 I am not seeing an issue when I test this code. The image zooms in to the vertical center of the picture on large screens in order to make sure that the picture covers the entire surface of the element. That's what background-size: cover; is doing. Link to comment Share on other sites More sharing options...
au246 Posted February 28, 2020 Author Share Posted February 28, 2020 Hello lngolme Apologies for the late reply. Thanks for checking this out. It's odd. When I use this test tool: http://responsivetesttool.com/ and enter my live website URL: https://caribbeanweather.org/ and choose very high resolutions from the Monitor test tool, it zooms into the vertical top left hand section of the image. I'm not sure why. Would you mind using my URL to test the code? Thanks for your feedback thus far. Cheers. Link to comment Share on other sites More sharing options...
Ingolme Posted February 29, 2020 Share Posted February 29, 2020 I am not seeing any issue. I think what you're seeing is that the responsive test tool is bigger than your window and only the left side of the page is visible in your monitor. Try scrolling to the right to see the rest of the page. Try using the developer tools in Firefox or Chrome and use their responsive tools. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now