Hey there! I'm having a little trouble with my background image in HTML. It's showing up multiple times in a row and despite searching online, I can't seem to find the right solution. Here is the code snippet from my file:
<!DOCTYPE html>
<html>
<head>
<title>'Cyclone development'</title>
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<hl>Cyclone development</hl> <img src="cyclone.jpeg" alt="Italian Trulli">
<p>Who are we ?<br></p>
<ans> We are a development team dedicated towards coding we make coding videos on youtube
for our users to learn and develop.
</ans>
</body>
</html>
Additionally, here is a snippet from my main CSS file:
hl{
color: rgb(0, 0, 0);
padding: 10px 10px;
font-size: 80px;
background: url(macoswall.jpeg);
background-size: 120px 120px;
}
body{
background: #999;
font-family: arial;
}
p{
color:rgb(255, 0, 0);
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-style: italic, bold;
background-color: rgb(0, 60, 255);
background-size: 300px 100px;
}
ans{
color:rgb(255, 0, 0);
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-style: italic;
}
My issue is that the background image for hl is repeating multiple times causing it to display like this. Can anyone guide me on how to fix this? Thanks!