Jump to content

Hero image not displaying correctly on different screen resolutions


Recommended Posts

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>
<meta name="viewport" content="width=device-width, initial-scale=1">
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;

<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>

<p>Page Content..</p>


Link to comment
Share on other sites

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

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.


Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...