0

I am trying to adjust my logo at the center of the webpage, but whenever I adjust it in my CSS file, the background is getting affected by the changes so there will be white spaces on top. 

.bgimage {
     width: 1903px;
     height: 1000px;
     background-image: url(https://drive.google.com/uc?id=1ZtitWTmH3qglyS7uv4X32GDQv35fmhwG);
     background-attachment: fixed;
     background-size: cover;
     margin-top: 60px;
     display: block;
    }
    
    
    
    .bgimage .ETLOGO {
     display: block;
     margin-left: auto;
     margin-right: auto;
     margin-top: 80px;
     width: 40%;
     height: 50%
    }
<div class="bgimage">
       <img src="https://drive.google.com/uc?id=1vXkFqCQzC7sagYCBOuAwDQMf-uhJTmAo" class="ETLOGO">
    </div>

Here is a photo of my website.

Zeeshan Ahmad Khalil
  • 645
  • 1
  • 9
  • 24
Richard
  • 17
  • 5
  • The easiest way would be to use absolute postionning. See answer n°3 of [this post](https://stackoverflow.com/questions/1776915/how-to-center-absolutely-positioned-element-in-div) by ProblemsOfSumit – Jake Mar 12 '19 at 09:06
  • how you want to align te image? – Xenio Gracias Mar 12 '19 at 09:09
  • If you want the logo centered in the background all the time just add it as a centered background image. – James Coyle Mar 12 '19 at 09:10
  • @JamesCoyle If it's his logo, it wouldn't be wise to set it as a background image. I would advise keeping an img tag and adding an alt description. – Jake Mar 12 '19 at 09:12
  • Thank you guys for those suggestions. I am going to try it later :) – Richard Mar 12 '19 at 09:15

1 Answers1

0

I think what you wanted was padding at the top of the logo, instead of margin. Try this:

.bgimage {
  background-attachment: fixed;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/0f/MOS6581_chtaube061229.jpg);
  background-position: center;
  background-size: cover;
  height: calc(100vh - 50px);
  width: 100vw;
}

.bgimage .ETLOGO {
  display: block;
  height: 50%;
  margin: 0 auto;
  padding-top: 40px;
}
<div class="bgimage">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/440px-Intel-logo.svg.png" class="ETLOGO">
 </div>
aridlehoover
  • 2,329
  • 1
  • 21
  • 19