Simon2233 Simon2233 - 6 months ago 9
CSS Question

EXTREME beginner making a website from scratch, how do i center things, pictures, and zoom problems

I've added an image that I want to be a banner for my website. http://puu.sh/peaj0/f753d03c5b.png

However, when I zoom in to 100%, it looks like this:
http://puu.sh/pealY/7c11f8c9d1.png

Why does it do this and how do I make it so at 100% zoom, it is perfectly centered? This is my css for it:

.Banner {
width: 200px;
margin: auto;
}


How does choosing a very large picture affect this? And would it be possible to scale it down to a smaller size with only css?

Help is very much appreciated!

Answer

I would suggest making it the background-image of your element with background-size: cover; and background-position: center center;. It will work with any image and will always be centered and filled.

body {
  margin: 0;
}

.wrapper {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.banner {
  background-image: url(http://www.placehold.it/2048x2048?text=Banner);
  height: 250px;
  background-size: cover;
  background-position: center center;
  margin: 0;
}

nav {
  display: block;
  background: #aaa;
}

ul {
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  margin: 5px 10px;
}

a {
  color: black;
  font-weight: bold;
  text-decoration: none;
}
<div class="wrapper">
  <header>
    <div class="banner"></div>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Unternehmen</a></li>
        <li><a href="#">Produkte</a></li>
        <li><a href="#">Galerie</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>
  </header>
</div>