I have the following rules in my css stylesheet:
body {
background: url('../Pic/poly-parallax Half.png') fixed center no-repeat;
background-color: rgb(231,231,231);
width: 100%;
background-size: contain;
background-position: left;
}
.logo {
height: 275px;
background: url('Pic/Logo.png') fixed center no-repeat;
background-size: 275px 70px;
background-position: top right;
}
But the logo image is keep on being responsive although i defined it as fixed.
Here's the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="BSC1.css">
<title></title>
</head>
<body>
<div class="logo">
</div>
</body>
</html>
Examples:
zoom 100%:
zoom 200%:
The only thing you might want to change is the
body's background-size fromcontaintocoverto really fill the window (as I did below), but the logo does not change its size with those settings and always stays at the top right: