0
Как вы можете видеть, логотип отображается над фоновым изображением, но я хотел бы, чтобы он находился в центре фонового изображения.Как я могу наложить логотип на изображение? используя css
это мой заголовок, и фон должен начинаться сверху страницы и заканчиваться перед меню. логотип должен отображаться в центре над фоновым изображением. Я пробовал много, но, возможно, у кого-то была аналогичная проблема и может помочь мне в этом.
это изображение показать Thats его почти работает, но его за фоном
<html>
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=font1|font2|etc' type='text/css'>
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="navbar.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--bootstrap-->
<link rel="stylesheet" type="text/css" href="styles/css/bootstrap.css">
<script src="styles/js/bootstrap.min.js"></script>
<!--datepicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="styles/js/bootstrap.min.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<header>
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<img class="logo" src="fts.png">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active">
</li>
<li data-target="#theCarousel" data-slide-to="1">
</li>
<li data-target="#theCarousel" data-slide-to="2">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="slide1">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<div class="slide2">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<div class="slide3">
<div class="carousel-caption">
</div>
</div>
</div></div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"> </span></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"> </span> </a>
</div>
</header>
<div id="cssmenu" class="align-right">
<ul>
<?php
switch ($_SESSION['isAdmin']) {
case "1":
echo '<li><a href="adminDash.php"><i class="fa fa-unlock"></i><span>AdminDash</span></a></li>' ;
break;
case "0":
break;
default:
break;
}
?>
<li><a href="index.php"><span>DASHBOARD</span><i class="fa fa-home"></i></a></li>
<li><a href="acties/nieuwTicketDash.php"><span><i class="fa fa-ticket"></i> NIEUW TICKET</span></a></li>
<li><a href="tickets.php"><span>ALLE TICKETS</span></a></li>
<li><a href="klanten.php"><span></i> KLANTEN</span></a></li>
<li class="active"><a href="acties/uitloggen.php"><span><i class="fa fa-sign-out"></i>UITLOGGEN</span></a></li>
</ul>
</div>
<br><br><br>
</body>
<style>
body {
background-color: #cdcdcd;
width: 100%;
margin: 0 auto;
}
img.logo {
height: 130px;
position: absolute;
margin: auto;
display: block;
top: 80px;
left: 0;
right: 0;
}
header{
width: 100%;
position: relative;
text-align: center;
}
\t \t
\t \t /* Carousel Styling */
.carousel div[class^=slide] {
height: 100px;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
z-index: -1
}
.slide1{
background-image: url('styles/3.jpg');
}
.slide2{
background-image: url('styles/2.jpg');
}
.slide3{
background-image: url('styles/1.png');
}
</style>
</html>
Возможный дубликат [Как разместить одно изображение поверх другого в HTML?] (Http://stackoverflow.com/questions/48474/how-do-i-position-one-image-on- top-of-another-in-html) –
https://css-tricks.com/absolute-positioning-inside-relative-positioning/ – sinisake