Jump to content

au246

Members
  • Content Count

    2
  • Joined

  • Last visited

Everything posted by au246

  1. 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.
  2. 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>
×
×
  • Create New...