'Still having problems with having white parts and background not covering all the background

Still having problems with having white parts and background not covering all the background, it's one of the most simple stuff and I can't manage to figure it out, I've been testing out different codes and videos all over the internet and can't get it to work. The webpage is just an index with 3 buttons, maths, physics and chemistry (each web aren't done yet), 3 font awesome icons and 3 black images with 0.5 opacity all along with a background that ISN'T on the internet because I edited it out in my desk.

The code is on the html:

<!DOCTYPE html>

<html>

<head>
    <script src="https://kit.fontawesome.com/18f289db08.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Last-Modified" content="0">
    <meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
    <meta http-equiv="Pragma" content="no-cache">
</html>
<meta name="author" content="Iván Camacho"/>
<meta charset="UTF-8" content="Iván Camacho"/>
<meta name="author" content="Iván Camacho"/>
<meta name="author" content="Iván Camacho"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" href="style.css">

<style>

body {
background-repeat: no-repeat;
background-size: contain;
background-attachment:local;
background-image: url("2022-03-08\ \(3\).png");
}

</style>

</head>
<body>

    <div class="Negro3">
        <img src="Fondo_Negro - copia.jpg" width="270" height="310">
        </div> 

<div class="Negro2">
    <img src="Fondo_Negro - copia (2).jpg" width="270" height="310">
     </div>    

<div class="Negro1">
<img src="Fondo_Negro.jpg" width="270" height="310">
</div>
    
<div class="superscript">
<i class="fa fa-superscript" style="font-size:60px;color:white;"></i>
</div>

<div class="calculator">
    <i class="fa fa-calculator" style="font-size:60px;color:white;"></i>
</div>

<div class="flask">
    <i class="fa fa-flask" style="font-size:60px;color:white;"></i>
</div>  

    <div class="Sciencestudio">
    <h1> Science studio </h1>
    </div>
<p>  <a href="https://google.es"> google link </a> <img src="https://www.google.com/search?q=imagen&rlz=1C1CAFB_enES711ES711&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiBudns5aT2AhVDrxoKHVc9DR8Q_AUoAXoECAIQAw&biw=1242&bih=568&dpr=1.1#imgrc=GEeCSbujNt4WcM"/>  cuerpo </p>

<div class="Matemáticas"> <p2> <a href="file:///C:/Users/xtrem/OneDrive/Escritorio/TICO%20Web%20Iv%C3%A1n%20Camacho%20Moya/Matem%C3%A1ticas.html" style="color:aliceblue"> MATEMÁTICAS </a> </p2> </div>
<div class="FÍSICA"> <p2> <a href="file:///C:/Users/xtrem/OneDrive/Escritorio/TICO%20Web%20Iv%C3%A1n%20Camacho%20Moya/F%C3%ADsica.html" style="color:aliceblue"> FÍSICA </a> </p2> </div>
<div class="QUÍMICA"> <p2> <a href="file:///C:/Users/xtrem/OneDrive/Escritorio/TICO%20Web%20Iv%C3%A1n%20Camacho%20Moya/Qu%C3%ADmica.html" style="color:aliceblue"> QUÍMICA </a> </p2> </div>

</body>


</html>

And the CSS code is:

.Negro1{
    position:relative;
    bottom: 70px;
    left: 1550px;
    opacity: 0.5;
}

.Negro2{
    position:relative;
    top: 245px;
    left: 1225px;
    opacity: 0.5;
}

.Negro3{
    position:relative;
    top: 560px;
    left: 900px;
    opacity: 0.5;
}

.Sciencestudio{
    position:relative;
    left:60%;
    bottom:790px;
    font-size: 50px;
    color: azure;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.superscript{
    position:relative;
    left:169%;
    bottom:300px;
    scale: 3;
    color:aliceblue;
}

.calculator{
    position:relative;
    left:126.5%;
    bottom:350px;
    scale: 2.5;
}

.flask{
    position:relative;
    left:161%;
    bottom:405px;
    scale: 2.5;
}

.Matemáticas{
    position:relative;
    left:75.5%;
    bottom:630px;
    scale: 1.5;
    color: aliceblue;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
} 

.FÍSICA{
    position:relative;
    left:95%;
    bottom:650px;
    scale: 1.5;
    color: aliceblue;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.QUÍMICA{
    position:relative;
    left:112%;
    bottom:670px;
    scale: 1.5;
    color: aliceblue;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Still having problems with having white parts and background not covering all the background

Sources

Related Questions