Div doesn't scale like the other DIV with background image - DIV is hanging on minimize.

LeonLatex · July 25, 2023

I have asked about this in another project before, but now the problem is back.

I am still struggling with this. Read through my CSS, and look at my HTML, I can't understand this no matter how hard I try, over and over again. My screen resolution is 1920X1080. In that resolution, the site looks as I want. It's only the header and the menu bar whos not cooperating. For those of you who want to see this problem in action and, what's happening and what's not happening, here is the link to the site: www.matsnakk.com

This is the one who's making all the trouble, but i need it for scaling my header banner background image:

  background: url("../../images/matsnakk_header.png") no-repeat;
   background-size: contain; /*Makes the background scaling.*/

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
include $_SERVER['DOCUMENT_ROOT'] . '/includes/db.php'; ?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title><?php echo $article['title_tag']; ?></title>
	
	<link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>
	<link rel="stylesheet" href="<?php echo BASE_URL; ?>scripts/css/style.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="<?php echo BASE_URL; ?>scripts/css/navbar.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="<?php echo BASE_URL; ?>scripts/css/header.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="<?php echo BASE_URL; ?>scripts/css/main.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="<?php echo BASE_URL; ?>scripts/css/footer.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="<?php echo BASE_URL; ?>scripts/css/main_elements.css" rel="stylesheet" type="text/css">
	
</head>
<body class="body">
<div class="banner"></div>

<div class="menu_div">
	<a href='<?=$HOST?>index.php'class='w3-bar-item w3-button color: white w3-round-tiny w3-hover-white'>Hjem</a>
  	<a href='<?=$HOST?>recipes.php'class='w3-bar-item w3-button w3-round-tiny w3-hover-white'>Oppskrifter</a>
  	<a href='<?=$HOST?>restaurants.php'class='w3-bar-item w3-button w3-round-tiny w3-hover-white'>Restauranter</a>
	<a href='<?=$HOST?>recipes.php'class='w3-bar-item w3-button w3-round-tiny w3-hover-white'>Café - Diners</a>
	<a href='<?=$HOST?>roadside.php'class='w3-bar-item w3-button w3-round-tiny w3-hover-white'>Etter veien</a>
	<a href='<?=$HOST?>fastfood.php'class='w3-bar-item w3-button w3-round-tiny w3-hover-white'>Fastfood</a>
  	<a href='<?=$HOST?>forums.php'class='w3-bar-item w3-button w3-round-tiny w3-hover-white'>Diskuter</a>
 	<a href='<?=$HOST?>news.php'class='w3-bar-item w3-button w3-round-tiny w3-hover-white'>Nyheter</a>
	<a href='<?=$HOST?>about.php'class='w3-bar-item w3-button w3-round-tiny w3-hover-white'>Om Matsnakk</a>
</div></div>
	<div class="main_bg">

  </div>
	<div class="footer_bg">
	<br>
	<div class="footer">
		Matsnakk &copy;<br>
		All Rights Reserved.
	</div>
</footer>
</body>
</html>

/* CSS Document */
div.logo_bg {
	width: 250px;
	height: 69px;
	margin-left: 28px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	padding-top: 0px;
	padding-left: 10px;
}

div.container {
	background-color: #f7f7f7;
	display: flex;
	position: fixed;
	box-sizing: border-box;
	overflow: hidden;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
}
body.style {
	background-color: #f7f7f7;
	font-family: "Verdana, Consolas", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
	padding-top: 0PX;
	margin-top: 0px;
}
div.banner {
	background-color: #033333;
	background: url("../../images/matsnakk_header.png") no-repeat;
	background-size: contain; /*Makes the background scaling.*/
	width: 100%;
	height: 250px;
	position: fixed;
}
/*div.logo_div {
	background-image: url("../../images/matsnakk_logo_liten.png");
	flex: 1;
	position: fixed;
	box-sizing: border-box;
	height: 69px;
	width: 250px;
	top: 11px;
	left: 30px;
}*/
div.menu_bar {
	background-color: #033333;
	position: fixed;
	box-sizing: border-box;
	overflow: hidden;
	font-size: 15px;
	font-weight: bold;
	margin-top: 0px;
	height: 25px;
	width: 100%;
	top: 0px;
	left: 0px;
}
div.menu_div {
  	display: flex;
  	justify-content: center;
	margin-top: 10px;
	background-color: #f7f7f7;
	position: fixed;
	box-sizing: border-box;
	overflow: hidden;
	height: 35px;
	width: 100%;
	top: 240px;
	left: 0px;
	border-bottom: 2px solid #033333;
}

Edited July 25, 2023 by LeonLatex

Sign In

Div doesn't scale like the other DIV with background image - DIV is hanging on minimize.

Recommended Posts

LeonLatex

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information