As a newcomer to web development, I am facing challenges in achieving the desired look for my first website. Despite spending over 2 hours researching and testing various CSS properties, I have not made much progress.
What I aim for is quite straightforward - I want to use an image as a background that stretches horizontally and/or vertically to fit the user's viewport, similar to the example shown here: Example Link
The specific image I want to use can be found here: Background Image
Many sources suggest using 'background-size: cover;' property, but this results in cropping parts of the top and bottom of the background image, which is not ideal for me.
I have tried 'background-size: contain', which fits the picture vertically but not horizontally, as illustrated here: Contain Example
My original image was large, so I resized it to 1920 x 1080 based on recommendations for background images. However, I am still struggling to make it stretch horizontally while maintaining its proportions.
Here is the code snippet I currently have:
html {
width: 100%;
height: 100%;
background-image: url(https://i.sstatic.net/3Xdg1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine"></link>
<title>Test</title>
</head>
<body>
</body>
</html>Despite attempts to reset default styling, I have yet to find a solution. Any help would be greatly appreciated. Thank you.