Background image displays wrong, don't know what to do

i'm pretty new to CSS but I made something in illustrator (web)and wanted to put this as background-image in css. I've put the image in a <div> and CSS in I just put background-image: url(berg.jpg), i'm sure the url is correct, but it doesn't display anything. I've put height: 100% in css after that and it showed up but it was all zoomed in and only displays a small corner of the picture because of the zoom. How can I display this correctly? The image size is width: 1366px; height:768px.

Sorry if this is already asked but I couldn't seem to find it. Thx on advance.

Solution

Your image is displaying as full size. If you add the background-size attribute to your css, you can define the size.

See this link for all background-size options: https://www.w3schools.com/cssref/css3_pr_background-size.asp

You can also define the background-position to have image centered, etc. https://www.w3schools.com/cssref/pr_background-position.asp

CSS example

    #problem-image {
      height: 200px;
      width: 200px;
      background-image: url('https://images.unsplash.com/photo-1463852247062-1bbca38f7805?auto=format&fit=crop&w=2255&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');
    }

    #correct-image {
      height: 200px;
      width: 200px;
      background-image: url('https://images.unsplash.com/photo-1463852247062-1bbca38f7805?auto=format&fit=crop&w=2255&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');
      background-size: cover;
      background-position: center center;
    }

See jsfiddle for full working example: https://jsfiddle.net/3o8b2e4s/