Simon2233 Simon2233 - 1 year ago 76
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.

However, when I zoom in to 100%, it looks like this:

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 Source

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(;
  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">
    <div class="banner"></div>
        <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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download