0
Warum kann ich die Bilder nicht mit meinem Code unten sehen. Ich versuche, es über CSS-Datei zu laden. In der main.css befindet sich auch die index.php.Bild zeigt nicht mit css
<!DOCTYPE html>
<html>
<head>
<title>Red Stone One Stop Shop</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css " />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1,user-scaleable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container">
<a href="/ecommerce/index.php" class="navbar-brand" id="text">Red Stone One Stop Shop</a>
<ul class="nav navbar-nav">
<!-- Dropdown menu -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="text">Men <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Shirts</a></li>
<li><a href="#">Pants</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!--Inserting Images-->
<div id="background-image">
<div id="image-1"></div>
<div id="image-2"></div>
</div>
<p>
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
Dies ist die main.css Datei
body{
padding-top: 50px;
}
#navbar{
/*background color: #FFF0000;*/
background-color: #800000;
}
/*change color to white*/
#text{
background-color: #000000;
color: #FFFFFF;
}
#background-image{
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
height: 60px;
background-image: url(../images/background.jpg);
background-repeat: no-repeat;
background-size: 100% 700px;
background-position: top center;
background-attachment: fixed;
}
#image-1{
position: absolute;
width: 100%
height: 350px;
background-image: url(../images/ecommerce2.jpg);
background-repeat: no-repeat;
background-position: left bottom;
background-size: auto 200px;
top: -100px;
left: -25px;
}
#image-2{
position: absolute;
width: 100%
height: 190px;
background-image: url(../images/ecommerce1.jpg);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 50% 200px;
top: 80%;
margin-top: -90px;
}
ich den Hintergrund sehen, aber die 2 Bilder zeigen nicht. Danke für die Hilfe.
versuchen z-index zu zwei Bildern (# image-2 & # Bild-1) –
Ist der Pfad korrekt hinzuzufügen .. /images/background.jpg? Wenn Sie überlegen, woher Sie auf die Seite zugreifen? – Corporalis
Versuchen Sie, einen positiven Z-Index auf die beiden Vordergrundbilder anzuwenden –