I am new to web development and am struggling to achieve what I would like for my first site and after over 2 hours of research and testing of the different CSS properties I find, I am still not getting anywhere.
What I want is probably quite simple really. I would like to use an image as a background image and need it to stretch horizontally and/or vertically, as required, to fit the user's viewport and then stay like that regardless of the contents, exactly as shown here : https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
The image is the following :
I found on a lot of sites that I should just use the ''background-size: cover;'' property. But in my case I get this :
which is not what I would like since we can no longer see the top or bottom of the background.
The closest I get is using the background-size:contain property but doing so the picture fits vertically but not horizontally, as seen here : Contain
Now what I need is for it to stretch horizontally but I am not getting it.
My picture's original size was quite large but as it was too big when I used the cover property, I resized is 1920 x 1080 which I found seems to be the recommended ratio for background images.
Is there a way to achieve what I would like?
The code I have so far is the simplest there is :
html {
width: 100%;
height: 100%;
background-image: url(https://i.stack.imgur.com/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">
<title>Test</title>
</head>
<body>
</body>
</html>I had tried resetting the default styling, in case the oversizing I experienced using :cover was due to that but it did not help.
Thank you for your help
