У меня проблемы с отображением фонового изображения с использованием css вместо тега в HTML-коде, и я не вижу, в чем ошибка.Я прошел через несколько потоков, где люди предлагали использовать 'background' вместо 'background-image' или ставить 'display: block;'к css, добавив высоту и ширину к <p> Я пытаюсь получить фоновое изображение и т. д. Ничто действительно не помогло мне.Если я добавлю селектор 'background-color', <p> сработает, но я просто не смогу увидеть фоновое изображение.Я попытался избавиться от кода js, чтобы увидеть, есть ли какое-то столкновение, а также попытался полностью избавиться от css и поместить фоновое изображение непосредственно в html, также не появилось.Я уверен, что относительный путь написан правильно.
var myImage = document.querySelector('img');
myImage.onclick = function() {
var mySrc = myImage.getAttribute('src')
if(mySrc === 'images/gang.jpg') {
myImage.setAttribute ('src','images/gang2.jpg');
} else {
myImage.setAttribute ('src','images/gang.jpg');
}
}
var myButton = document.querySelector('button');
var myHeading = document.querySelector('h1');
function setUserName() {
var myName = prompt('Please enter your name.');
localStorage.setItem('name', myName);
myHeading.textContent = 'Tortoises are cool as fuck, ' + myName;
}
if(!localStorage.getItem('name')) {
setUserName();
} else {
var storedName = localStorage.getItem('name');
myHeading.textContent = 'Tortoises are cool as fuck, ' + storedName;
}
myButton.onclick = function() {
setUserName();
}
html {
font-size: 20px;
font-family: 'Questrial', sans-serif;
background-color: #6b4e15;
color: #332e27;
}
body {
width: 600px;
margin: 0 auto;
background-color: #eabe69;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
img {
display: block;
margin: 0 auto;
width: 100%
}
h1 {
margin: 0;
padding: 20px 0;
color: #6b4e15;
text-shadow: 3px 3px 2px black;
font-size: 60px;
text-align: center;
}
p, li {
font-size: 16px;
line-height: 1.5;
letter-spacing: 0px;
}
a {
text-decoration: none;
color: #332e27;
border: 1px solid #332e27;
border-radius: 5px;
padding-left: 7px;
padding-right: 7px;
margin: 0 0 0 0;
}
a:hover {
color: #eabe69;
background-color: #332e27;
border: 1px solid #332e27;
border-radius: 5px;
transition-duration: 0.4s;
}
address {
text-align: center;
}
#squirtel {
background-image: url('./images/pokemon.png');
width: 1000;
height: 1000;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title> Tortoise is cool </title>
<link rel='stylesheet' href='styles/style.css' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Questrial' rel="stylesheet">
<meta name='author' content='Jan Jansa'>
<meta name='description' content='The best page about tortoises'>
<meta property='og:image' content='images/gang.jpg'>
<meta property='og:description' content='Ahoj tohle je zelvi stranka o zelvach a je hodne v pohode'>
<meta property='og:title' content='Hey! Tortoise is cool!'>
<meta property='og:type' content='website'>
<meta property='og:site_name' content='Hey! Tortoises are cool!'>
<meta property='og:url' content='https://jankko7.github.io/'>
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon'>
</head>
<body>
<h1> Tortoise is cool! </h1>
<img src='images/gang.jpg' alt='Four little tortoises on white stone lying with their bellies up'>
<p> <a href='#changeuser'> Tortoises are: </a></p>
<ul>
<li> Cool </li>
<li> Osinka </li>
<li> Ferda </li>
</ul>
<p id='squirtel'> <a href='https://en.wikipedia.org/wiki/Marginated_tortoise' target='_blank'>
The marginated tortoise (Testudo marginata) </a>
is a species of tortoise found in Greece, Italy and the Balkans in southern
Europe. It is the largest European tortoise, reaching a weight of up to 5 kg (11 lb) and
a length of 35 <abbr title='centimeters'>cm</abbr> (14 <abbr title='inches'>in</abbr>). Its shell is oblong and has a notable thickness
around the middle of the body. The posterior end of the shell has
a saw-like formation, flanged outward <strong>like a bell</strong>. The carapaces of adult
specimens are almost completely black, with yellow highlights. The front
sides of the limbs are covered with large scales. The tail is notable for
a lengthwise marking and for an undivided carapace over the tail.
The marginated tortoise is herbivorous, and hibernates for the winter.
The Marginated Tortoise is recorded for the first time from Turkey, from
the delta of the Küçük Menderes River which is less than 250 <abbr title='kilometers'>km</abbr> away from
the closest known area in Greece.
</p>
<h2> Tortoise X Turtle X Blastoise </h2>
<dl>
<dt> <a href='images/tortoise.jpg'>Tortoise</a></dt>
<dd> a reptile with shield living on <strong>a dry land</strong>. </dd>
<dt> <a href='images/turtle.jpg'>Turtle</a></dt>
<dd> a reptile with shield living in <strong> a sea </strong> or <strong> an ocean </strong>.</dd>
<dt> <a href='images/blastoise.png'>Blastoise</a></dt>
<dd> a reptile with a shield and ability to <strong> hydro blast </strong> you to the flippin sky. </dd>
</dl>
<button id='changeuser'> Change User </button>
<h2> Contact me </h2>
<p> You can <a href='mailto:jan.jansa95@gmail.com?cc=jan.jansa@icloud.com&subject=Let%20me%20ask%20you%20bout%20turtles%20bro!&body=Hi%20friend%20let%20me%20ask%20you%20this%2C%0B%0B'>
mail me </a> about some more tortoise info!
</p>
<p><address> © Jan Jansa </address></p>
<script src='scripts/main.js'></script>
</body>
</html>
Есть идеи, пожалуйста?