0

I am learning CSS and HTML5 but I can't figure out how to do some basic stuff. I'm using google Chrome and trying to create a top bar for the page, essentially a rectangle that extends to every edge of the page and have a simple logo in the bar that allows a user to click it to return home. No matter what I do I always have whitespace around my background, also using the attachment property with the scroll value I get a non-scrolling background.

Heres my code:

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>
Rocks
  • 1,145
  • 9
  • 13
Runeater DaWizKid
  • 81
  • 9

1 Answers1

0

This behaviour is caused because browsers have varying default styling behaviours. I would recommend including CSS reset at the top of your stylesheet to reset the browsers default styling behaviour before setting your own styles.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

The above is taken from http://meyerweb.com/eric/tools/css/reset/

Steve Westgarth
  • 103
  • 8
  • I appreciate the help, do you happen to know why the above isn't working though? I would think that my css would override the browsers default. – Runeater DaWizKid Mar 11 '18 at 18:39
  • Your CSS won't override the browers default because the browser has padding set as default on the body and you arn't changing the body padding in your code. The only way to ensure that your code will work cross browser is to ensure you have CSS reset called as the first set of CSS rules. – Steve Westgarth Mar 11 '18 at 18:53