Search code examples
htmlcssbackgroundbackground-image

i try to increase my logo size in header section with the css but it split

My logo is split whenever i try to increse its size in the header. This is the logo.

enter image description here

header {
  background-image: url(https://i.sstatic.net/ycpfl.png);
  background-size: 50px;
  /*if i increse the size my logo is croped*/
  background-repeat: no-repeat;
  height: 50px;
  width: 150px;
  float: left;
}
<body>
  <header></header>
</body>

Solution

  • yes because you are giving height to header 50px. it will fine if background-size is also 50px. but it will crop if you increase size of the background-size. you also have to increase the height of the div. so it will be fine.

    also you can give background-size contain. so image will be load in it's full size and it will also not split.

    header {
  background-image: url(https://i.sstatic.net/ycpfl.png);
  background-size: contain;
  /*if i increse the size my logo is croped*/
  background-repeat: no-repeat;
  height: 50px;
  width: 250px;
  background-position:center;
  float: left;
}
    <body>
  <header></header>
</body>