Currently, I am in the process of learning CSS and HTML5. However, I am experiencing some difficulty when it comes to implementing basic elements. Specifically, I am using Google Chrome and attempting to create a top bar for my webpage. This top bar should be a rectangle that spans across the entire page with a simple logo that redirects the user back home when clicked. Despite my efforts, I am struggling to remove the white space around the background. Additionally, when trying to use the 'scroll' value for the background-attachment property, the background ends up as non-scrolling.
Below is the code snippet I have been working on:
img#logo {
width: 10%;
height: auto;
max-width: 100%;
}
#topbar {
background-color: #0000FF;
width: 100%;
height: 10%;
margin: 0px;
padding: 0px;
background-attachment: scroll;
}<body>
<!-- Our displayed logo/hyperlink to home page -->
<header id="topbar">
<a href="home.html"><img id="logo" src="logo.png" alt="Your company
logo" /></a>
</header>
</body>