0

I am currently making a website for my school as a practice. But while setting up the background of the header, I am unable to remove the white lines outside the background image. Besides, adjusting the size of the window of the browser will resize the background but I want to maintain the width. Below is the showcase image of the header, alongs with my source code. enter image description here

.PageHeader {
  display: block;
  flex-direction: row;
  flex-wrap: wrap;
  background-image: linear-gradient(315deg, rgba(17, 48, 247, 0.59), rgba(50, 183, 240, 0.41) 49%, rgba(83, 45, 233, 0.38)), url(../Media/Background/wallpapersden.png);
  background-position: 50%, 25%;
  background-size: auto, cover;
  background-repeat: repeat, no-repeat;
  background-attachment: scroll, fixed;
  width: 100%;
  height: 400px;
}

.CampusTVLogoAndName {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
  top: 10px;
  right: 15px;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.CampusTVLogo {
  height: 375px;
  margin-right: 20px;
  display: inline-block;
}

.CampusTVTitle {
  font-weight: bold;
  font-size: 30px;
  color: white;
}

.CampusTVTitle_CN {
  font-family: 'Courier New', Courier, monospace;
}
<div class="PageHeader", role="banner">
  <div class="CampusTVLogoAndName">
    <img src="https://via.placeholder.com/500x500" class="CampusTVLogo">
    <div class="CampusTVTitle">
      <div class="CampusTVTitle_CN">東華三院辛亥年總理中學校園電視台</div>
      <div class="CampusTVTitle_EN">Sun Hoi Directors' College Campus TV</div>
    </div>
  </div>
</div>
Cédric
  • 2,239
  • 3
  • 10
  • 28
Bobosky
  • 155
  • 1
  • 1
  • 15
  • properly the default body margin. You can remove it with `body { margin: 0; }`. Also if you want to sue a header, you should use the semantic `
    `-tag over a div with that class.
     – tacoshy May 20 '22 at 14:30
  • This help on fixing the margin issue, have been confusing on this for couple hours. Do you have an idea for resize issue? – Bobosky May 20 '22 at 14:34
  • A better resource for the body margin issue is [Removing body margin in CSS](https://stackoverflow.com/questions/30208335/removing-body-margin-in-css). The other suggested duplicate is closed as opinion-based. – Stephen Ostermiller May 20 '22 at 14:36

0 Answers0