How to hide alt text-CodePudding

I am new to coding, but my understanding is that alt text is normally hidden? However, the alt text keeps showing up at the top of my screen? I want it so that the background is touching the top, but instead, the alt text is sitting at the top of the page and I do not know how to hide it. Could someone please take a look at my code and tell my what I am doing wrong? Thank you!

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Personal Homepage</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
<script src="https://kit.fontawesome.com/012219d900.js" crossorigin="anonymous"></script>
<style>
.text-box{
background-color: transparent;
color: #FFF;
margin: 20px;
padding: 20px;
}

.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(assets/about-sub.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}

</style>

<img src="C:\Users\amand\Desktop\persona homepage\assets\"about-sub.jpg" alt="girl in kimono">
    </head>
    <body>
        <section class="sub-header">
            <nav>
                <a href="index.html">AMANDA YEE</a>
                <div class="nav-links" id="navLinks">
                  <i class="fa fa-times" onclick="hideMenu()"></i>
                    <ul>
                        <li><a href="about.html">ABOUT</a></li>
                        <li><a href="gallery.html">GALLERY</a></li>
                        <li><a href="CV.html">CV</a></li>
                        <li><a href="contact.html">CONTACT</a></li>
                    </ul>
                </div>
                <i class="fa fa-bars" onclick="showMenu()"></i>
            </nav>
            <h1>ABOUT</h1>
</section>

<!--about content-->
<section class="about-me">

    <div class="row">
        <div class="about-col">
            <h1>This is me.</h1>
            <p>My name is Amanda and I am a graphic and aspiring UX/UI designer based in New York. My designs operate in a space of cultural contrast all while centering around delight, empathy, and social awareness. I am fascinated with the beautiful intersection of design and culture when it comes to communicating and connecting with others; I use these interconnected interests to craft thoughtful experiences and designs through the power of storytelling.</p>
    </div>
    <div class="about-col">
        <img src="assets/about.jpg" alt="girl smiling">
    </div>
</div>

</section>



<!--Footer-->

<section class="footer">
    <div class="icons">
    <a href="https://www.linkedin.com/in/amanda-zi-yee/"> <i class="fa fa-linkedin-square"></i></a>
    <a href="https://www.instagram.com/yu.zixin/"><i class="fa fa-instagram"></i></a>
    <a href="mailto:[email protected]"><i class="fa fa-envelope-o"></i></a>
    </div>
</section>



<!--Javascript for Toggle Menu-->
    <script>
        var navLinks = document.getElementById("navLinks");
        
        function showMenu(){
            navLinks.style.right = "0";
        }
        function hideMenu(){
            navLinks.style.right = "-200px";
        }
    </script>
    
    </body>
</html>

CodePudding user response：

ALT text only appears when your image couldn't be loaded. Just make sure whether your relative path to your relevant image is correct

CodePudding user response：

.sidebar { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #11cdd4; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidebar a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }

.sidebar a:hover { color: #30e3cb; }

.sidebar .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; }

.openbtn { font-size: 20px; cursor: pointer; background-color: #11cdd4; color: white; padding: 10px 15px; border: none; }

.openbtn:hover { background-color:#30e3cb; } .open{ font-family:sans-serif; font-weight:bold; font-size:25px; color:#11cdd4; }

☰ Open Sidebar × About Gallery Cv Contact

function openNav() { document.getElementById("mySidebar").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; } function closeNav() { document.getElementById("mySidebar").style.width = "0"; document.getElementById("main").style.marginLeft= "0"; }