Я создаю новый веб-сайт и проверяю свой текущий код в нескольких браузерах, где я нашел фоновые изображения, которые я поместил в тег заголовка с помощью CSS в Chrome, но не в другом браузере.Я хотел бы, чтобы изображения работали во всех браузерах.
Я прочитал несколько потоков, которые охватывают эту тему, но ни одно из решений не работает.
HTML
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<title>Bazaar Ceramics - Home</title>
</head>
<header>
<a class="logo" href="/Home.html"><span>logo</span></a>
</header>
<!--navigation, body and footer below-->
CSS
body, html{
min-height:100%;
min-width:100%;
}
header{
background: url(/Images/banner.jpg) no-repeat center 0;
background-size: cover;
margin-bottom: 0px;
position: relative;
height: 296px;
}
header a.logo {
position: absolute;
display: block;
width: 200px;
height: 136px;
background: url(/Images/logo.png) no-repeat 0 0;
background-size: contain;
z-index: 1;
top: 160px;
left: 50px;
}
header a.logo span {
display: none;
}
@media screen and (max-width: 750px) {
header a.logo { width: 150px; height 100px; }
nav { padding: 0px 0px 0px 10px; }
}
Браузер Chrome правильно отображает баннер и логотип, когда размер браузера изменяет размер изображения, изменяют его в соответствии с размером браузера или указанным размером CSS.я могу навести курсор мыши на логотип и увидеть изменение стрелки, и его можно выбрать во всех браузерах.