Image on background sticking to fullscreen - button sticking to the left
Question
I apologize if the question is simple but I barely begin in front end development and may miss some keyword to grasp existing question.
I have a simple html file with a title and three button, the CSS has only a picture.
html
<!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;
}
Problem:
when I resize, minimze, maximize my browser window, the title and the three buttons are sticked to my left border and the image resize as well... whereas I want the button to stay on the left like when my browser window is in full screen. I want the image to be set up in full screen, and when I resize, there is only the part of the image delimited by the browser window which should appear.
For example, on this by resizing the window, the buttons are staying on the bottom and the background image does not adapt to resizing.
I am open to jQuery solution if needed.
Many thanks for the help,
2 answers
solution1
1 2015-09-24 09:57:23
If you dont want the image to adapt on resizing, the css should only be:
background-image: url("../pics/somePicture.jpg");
And the image will be showed as it is, never adapting to the window size.
About the links, the answer given by #Rohit Kumar is what you want, test it here: jsfiddle.net/qp4xfvjj , but may be adding:
<body style="overflow: hidden">
solution2
0 2015-09-24 10:05:53
If you don't want to break the <a> on next lines then you should use - white-space: nowrap; . And if you want to hide the <a> when window width is less than 1cm then you should use @media query like this -
@media all and (max-width: 100px) { /* you have to enter width in px */
a {
display: none;
}
}
check out this fiddle
And for your background-image to be fully displayed (without any cropping) at all resolutions, you should use - background-size: contain instead of background-size: cover
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.