CODEWITHSUNDEEP
htmlcss
Jack Scott
Jack Scott

Reputation: 119

Center an image horizontally with CSS, on top of a background video

New to coding. I've set a video to autoplay on the background of a website. When I try to place an image on top, I encounter issues, specifically when attempting to center it horizontally.

The typical solution results in the image disappearing:

img.center {
   display: block;
   margin: 0 auto;
}

Here is my CSS for the logo:

.logo {
   position: absolute;
   margin-left: auto;
   margin-right: auto;
   height: 250px;
   padding-top: 15px;
}

I need this logo to float on top of the background video with it styled as such:

#bgvideo {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   min-width: 100%;
   min-height: 100%;
}

Upvotes: 2

Views: 59

Answers (1)

cela
cela

Reputation: 2500

It is simple as this. Here is a working codepen.

HTML:

<video autoplay muted loop id="myVideo">
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<img id="myImg" src="https://www.searchenginegenie.com/images/29-samplelogo.jpg" width="200">

CSS:

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}
#myImg {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    margin: auto; 
}

Upvotes: 2

Related Questions