Excuse me if my question seems basic, as I am just starting out in front-end development and may not know all the necessary terms to fully understand existing questions.
I currently have a simple html file that consists of a title and three buttons, with the CSS containing only an image.
HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/style.css" rel="stylesheet" media="all">
</head>
<body>
<div id="banner">
<h1> A random title </h1>
<div id="navi" class="navi">
<a class="navi-button" href="#Home">Rules</a>
<a class="navi-button" href="quizz1.html">Quizz</a>
<a class="navi-button" href="#Contact"> Contact</a>
</div>
</div>
</body>
</html>
CSS:
html {
background: url(../pics/somePicture.jpg) no-repeat center center fixed;
background-size: cover;
}
The Issue:
As I resize, minimize, or maximize my browser window, the title and buttons remain fixed at the left border while the image resizes. However, I want the buttons to stay on the left when the browser window is full screen. Additionally, I want the image to be displayed in full screen, with only the part visible within the browser window after resizing.
For reference, you can see on this website, that by resizing the window, the buttons remain at the bottom and the background image does not adapt.
I am open to jQuery solutions if necessary.
Thank you for your assistance,