I recently received feedback on a previous assignment stating that my images were blurry. However, I am unsure how to resolve this issue despite following the assignment instructions thoroughly.
The specific requirements for the images are:
Add a new selector ID named "yurthero." In the CSS code declarations, configure a height of 300px and ensure that the background image (coast.jpg) fills the space without repeating (using background-size: 100% 100%;).
How can I prevent my images from appearing blurry? It seems like the stretching of the image is causing it to blur.
Below you will find the HTML5, CSS3, and image files that I am using: https://i.sstatic.net/Xz2lv.jpg
/* pacific.css for assignment #3 by Caleb Latimer */
body{
background-color: #FFFFFF;
color : #666666;
font-family: Verdana;
background-image: url(background.jpg);
}
h1{
background-color: #000033;
color : #FFFFFF;
font-family: Georgia;
line-height: 200%;
background-image: url(sunset.jpg);
background-repeat: no-repeat;
padding-left: 20px;
height: 72px;
margin-bottom: 0;
background-position: right;
}
nav{
font-weight: bold;
background-color: #90C7E3;
padding: 5px 5px 5px 5px;
}
h2{
color: #3399CC;
font-family: Georgia;
<!-- Remaining CSS code goes here -->
<footer>
Copyright © 2016 Pacific Trails Resort <br />
<a href = "mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2261434e4740626e43564b4f47500c41...">[email protected]</a>"><a href=...
</footer>
</div>
</body>
</html>