Cześć, dlaczego Microsoft Edge i Internet Explorer nie wyświetlają obrazu jako tła ?
HTML:
<!doctype html>
<html lang="pl-PL">
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="Poradnia Psychologiczno-Pedagogiczna w Grudziądzu,psycholog Grudziądz,poradnia psychologiczna w Grudziądzu,"/>
<meta name="description" content="Witamy na naszej stronie :) * Potrzebujesz pomocy ? * Zapraszamy ! * O PORADNI * CELE I ZADANIA * NASZA KADRA * REJON DZIAŁANIA * AKTUALNA OFERTA * PUNKTY KONSULTACYJNE * DORADZTWO ZAWODOWE."/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<link href="css/style.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<title>Zapraszamy!</title>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="container">
<nav>
<i id="hamburger" class="fa fa-bars" aria-hidden="true"></i>
<ol id="menu">
<li><a href="index.html">Zapraszamy !</a></li>
<li><a href="o_poradni.html">O poradni</a>
<ul>
<li><a href="cele_i_zadania.html">Cele i zadania</a></li>
<li><a href="nasza_kadra.html">Nasza kadra</a></li>
<li><a href="rejon_dzialania.html">Rejon działania</a></li>
<li><a target="_blank" href="https://www.facebook.com/Poradnia-Psychologiczno-Pedagogiczna-Grudzi%C4%85dz-1446260468795693/?ref=aymt_homepage_panel">Aktualna oferta</a></li>
<li><a target="_blank" href="https://www.facebook.com/Poradnia-Psychologiczno-Pedagogiczna-Grudzi%C4%85dz-1446260468795693/?ref=aymt_homepage_panel">Punkty konsultacyjne</a></li>
</ul>
</li>
<li><a target="_blank" href="https://www.facebook.com/DoradcaZ-934787029928006/?fref=ts">Doradztwo zawodowe</a>
<ul>
<li><a href="dokumenty_do_pobrania.html">Dokumenty do pobrania</a></li>
</ul>
</li>
<li><a href="poradnik.html">Poradnik dla rodzica</a></li>
<li><a href="druki.html">Druki do pobrania</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ol>
</nav>
<header>
<img src="img/drzewko.png" alt="drzewko"/>
<h1>Poradnia Psychologiczno-Pedagogiczna</h1><h1>w Grudziądzu</h1>
<div id="fb"><a target="_blank" href="https://www.facebook.com/Poradnia-Psychologiczno-Pedagogiczna-Grudzi%C4%85dz-1446260468795693/?ref=aymt_homepage_panel""><i id="fb_icon" class="fa fa-facebook" aria-hidden="true"></a></i></div>
</header>
<main>
<article>
<div class="wstep">
<p id="animate_p">Ideą naszej pracy jest niesienie pomocy i wsparcia dzieciom i młodzieży, ich rodzicom i wychowawcom – TYM, którzy tej pomocy potrzebują. W swojej pracy kierujemy się zasadami etyki i poszanowania praw oraz godności każdego człowieka. Staramy się bronić praw dziecka, szukać najlepszych rozwiązań – aby skutecznie pomagać.</p>
<i id="smile" class="fa fa-smile-o" aria-hidden="true"></i>
</div>
</article>
</main>
<div id="family_img">
<img src="img/obrazek.jpg" alt="family"/>
</div>
<footer>
<p>Poradnia Psychologiczno-Pedagogiczna w Grudziądzu - 2018 ©</p>
</footer>
<a id="scroll-to-top" href="#"><i class="fa fa-caret-up" aria-hidden="true"></i></a>
</div>
</body>
</html>
CSS:
html{
font-size: 100%;
}
body{
margin: 0;
padding: 0;
font-family: 'Alegreya Sans', sans-serif;
background-image: url(../memphis-colorful/memphis-colorful/memphis-colorful.png);
/* Background pattern from Subtle Patterns */
color: #fff;
}
h1{
font-size: 1.2rem;
}
a{
text-decoration: none;
color: #fff;
}
header,article,footer,ol,.arrow,#scroll-to-top,#doc,#user,#users,#lokalizacja,#phone,figcaption,figure,.center{
text-align: center;
}
.right{
text-align: right;
}
#doc_icon,#user_icon,#users_icon,#phone_img,#lokalizacja_icon,#smile{
font-size: 60px;
}
#slider img,#rejon_dzialania img,.poradnik_img img,#kadra img,#img_poradnia img,select{
width: 100%;
}
.poradnik_img{
display: none;
}
#pierwszy{
display: block;
}
nav{
background-color: #000;
border-bottom: 1px solid;
height: 50px;
position: relative;
}
header{
height: 440px;
background-image: url('../img/most2.jpg');
}
header img{
margin-top: 60px;
}
article{
background-color: #142045;
padding: 20px;
font-size: 1.2rem;
}
footer{
background-color: #142045;
padding: 20px;
}
figure,blockquote p{
margin: 0;
}
figcaption{
font-size: 12px;
}
blockquote{
font-family: 'Caveat', cursive;
}
#slider{
display: none;
position: relative;
}
.arrow{
width: 100px;
height: 100%;
padding-top: 170px;
box-sizing: border-box;
position: absolute;
font-size: 25px;
}
.arrow:hover{
background-color: #d3d3d3;
opacity: 0.5;
}
#arrow_2{
right: 0;
}
#hamburger{
font-size: 30px;
position: absolute;
top: 10px;
left: 10px;
}
#scroll-to-top{
border-radius: 30px;
width: 50px;
height: 45px;
padding-top: 5px;
background-color: #d75a4a;
font-size: 30px;
position: fixed;
bottom: 5%;
right: 5%;
}
#rejon_dzialania img{
margin-top: 20px;
}
#fb{
background-color: #2f487a;
width: 50px;
height: 50px;
}
#fb_icon{
font-size: 25px;
margin-top: 13px;
}
.cyan{
color: #00ffff;
text-transform: uppercase;
}
.color{
background-color: #192957;
padding: 30px;
color: #fff;
}
.color2{
color: #4F9AA0;
}
span{
color: #4F9AA0;
}
.cream{
padding: 20px;
background-color: #fffcba;
color: #000;
font-family: 'Caveat', cursive;
}
#g_maps{
display: none;
}
#lokalizacja{
background-color: #656565;
padding: 20px 0;
width: 80%;
margin: 0 auto;
display: none;
}
#phone{
color: #d75a4a;
}
#smile{
margin-top: 10px;
}
#family_img img{
display: none;
}
.lista li{
margin-bottom: 15px;
}
.lista{
padding-left: 20px;
}
.underline{
text-decoration: underline;
color: #e38b80;
}
/*----- MENU -----*/
ol,ul{
margin: 0;
padding: 0;
}
ol{
position: absolute;
top: 50px;
width: 100%;
background-color: #2a2a2a;
display: none;
}
ol li{
list-style-type: none;
}
ol li a{
display: block;
padding: 15px;
}
/*----- MENU -----*/
@media screen and (min-width: 1370px){
#container{
width: 1366px !important;
margin: 0 auto;
}
}
@media screen and (max-width: 550px){
#family_img img{
display: block;
width: 100%;
}
#lokalizacja{
display: block;
}
}
@media screen and (min-width: 551px){
#slider{
display: block;
}
}
@media screen and (min-width: 550px){
#img_poradnia{
width: 60%;
margin: 0 auto;
}
#g_maps{
display: block;
}
}
@media screen and (min-width: 800px){
.tekst,.wstep{
padding: 0 50px;
}
}
@media screen and (min-width: 770px){
h1{
font-size: 1.5rem;
}
#container{
width: 90%;
margin: 0 auto;
}
#scroll-to-top{
right: 10px;
}
}
@media screen and (min-width: 500px){
#menu{
width: 300px;
}
figure{
width: 50%;
margin: 0 auto;
}
#pierwszy{
width: 40%;
margin: 0 auto;
}
}
@media screen and (min-width: 992px){
h1{
font-size: 1.8rem;
}
.wstep{
padding: 0 100px;
}
#users_icon,#user_icon{
font-size: 80px;
}
article,footer{
font-size: 1.4rem;
}
.arrow{
font-size: 40px;
}
figure{
width: 30%;
}
}
@media screen and (min-width: 1200px){
header{
background-attachment: fixed;
}
.poradnik_img{
display: block;
width: 40%;
margin: 0 auto;
}
.color3:hover a{
color: #df7c70;
}
#wstep{
padding: 0 100px;
}
#hamburger{
display: none;
}
nav,ul{
background-color: #545454;
}
#menu{
display: flex;
justify-content: center;
width: 100%;
position: static;
}
ol{
height: 51px;
}
ol li{
border: none;
width: 200px;
}
ol li:hover{
background-color: #767676;
}
ol li ul{
display: none;
}
ol li:hover ul{
display: block;
}
#scroll-to-top{
opacity: 0.6;
}
#scroll-to-top:hover{
opacity: 1;
}
#fb:hover{
background-color: #355088;
}
}
