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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...