Mixing
Background-image: preserve aspect ratio of the browser window
Background-image: preserve aspect ratio of the browser window
I hope you are well!
It's possible to set up an image-background 100% hight and 100% width like on an tag so I can preserve the aspect ratio when I resize the browser window.???
I would like the same effect like I have on the code attached but created with a division with the background-image.
Thanks for your attention!
*{
margin:0px;
padding:0px;
box-sizing: border-box;
}
header{
}
.image{
height:100%;
width: 100%;
}
.main-nav{
width:100%;
height:60px;
display:flex;
flex-wrap:wrap;
z-index: 1000;
background-color:#080808;
position:relative;
}
.side-nav p{
text-decoration: none;
color:#000000;
font-size:22px;
font-family: myriad pro;
white-space: nowrap;
padding:10px 6px;
overflow: hidden;
white-space: nowrap;
opacity:0.5;
transition: all 0.3s ease-in-out;
}
.side-botton{
width:60px;
height:100%;
background-image:url("botton.png");
background-position:center;
background-repeat: no-repeat;
background-size:80%;
cursor: pointer;
background-color:#ff962d;
}
.main-nav ul{
display:flex;
flex-wrap:wrap;
}
.main-nav ul li{
list-style:none;
line-height: 60px;
}
.main-nav ul li a {
text-decoration:none;
padding:10px;
font-size:22px;
color:white;
font-family: myriad pro;
}
main-nav ul li hover{
color:yellow;
}
.side-nav{
background-color:#ff962d;
position:fixed;
width:60px;
height:calc(100% - 60px);
visibility:hidden;
transition: all 0.3s ease-in-out;
position:absolute;
}
.side-nav ul li a {
text-decoration: none;
color:white;
font-size:22px;
font-family: myriad pro;
white-space: nowrap;
opacity:0;
transition: all 0.3s ease-in-out;
}
.side-nav ul li {
list-style: none;
padding:10px 6px;
z-index: 1000;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<img class="image "src="cover.jpg">
<nav class="main-nav">
<ul>
<li><a href=""> Home </a></li>
<li><a href=""> Faq </a></li>
<li><a href=""> About Us </a></li>
<li><a href=""> Services </a></li>
</ul>
</nav>
http://java.js
</body>
</html>
Thanks!!!
background-size: 100% 100%;
3 Answers
3
Background-image: preserve aspect ratio of the browser window:
try this:
background-size: cover;
background-repeat: no-repeat;
Hi, Already tried, but when I select cover, the image is cropped and is not good.
– Jakub Klos
Jun 29 at 10:49
@JakubKlos Then you probably want
contain rather than cover.– Turnip
Jun 29 at 10:49
contain
cover
@Turnip It will not cover the entire browser window with contain
– Arex
Jun 29 at 10:52
@Arek it is impossible to cover the entire window and maintain aspect ratio without cropping the image. So yes, of course it will not fill the entire window.
– Turnip
Jun 29 at 10:57
@Turnip I know but he wants to fill his entire window. So, it is actually not possible to achieve everything.(Fill the window, maintain ratio, no cropping)
– Arex
Jun 29 at 11:00
If you want the image to cover the entire screen and also not be cropped(loses its ratio) use:
background-repeat:no-repeat;
background-size:100% 100%;
If you want the image to cover the entire screen and be cropped(maintains its ratio) use:
background-repeat:no-repeat;
background-size:cover;
If you dont want the image to cover the entire screen and not be cropped(maintains its ratio) use:
background-repeat:no-repeat;
background-size:contain;
Use this link for better understanding:
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain
try this,Hope this may help you
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
background-size: 100% 100%;doesn't this work??– Rakibul Islam
Jun 29 at 10:34