CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
eyedfox
eyedfox

Reputation: 714

Responsive centering an image using css, bootstrap

I am trying to center an image that has a background video container. I would like for it to be exactly centered vertically and horizontally. At the moment i can only center the image horizontally but having trouble centering it vertically. When i do center the image it does'nt become responsive. Any ideas?

This is how it looks on my header area: https://i.sstatic.net/vikvx.jpg

HTML code:

<div class="header-container">

        <div class="video-container">
            <video preload="true" autoplay="autoplay" loop="loop" volume= "0">

            <source src="video/backgroundAnime.mp4" type="video/mp4">
            <source src="video/backgroundAnime.webm" type="video/webm">
            <source src="video/backgroundAnime.ogv" type="video/ogg">                
            </video>

        </div>

        <img src="img/albayda.png" class="img-responsive center-block">

    </div>

CSS code:

    .header-container{
      width: 100%;
      height: 800px;
      border-left: none;
      border-right: none;
      position: relative;
      padding: 20px;
     }

    .video-container{
      position: absolute;
      top: 0%;
      left: 0%;
      height: 100%;
      width: 100%;
      overflow: hidden;
     }

     video{
      position: absolute;
      z-index: -1;
      width: 100%;
     }

     .img-responsive{
       margin:0 auto;
     }

Upvotes: 0

Views: 69

Answers (2)

Chris
Chris

Reputation: 355

.header-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

That should do it.

Upvotes: 1

jaboja
jaboja

Reputation: 2237

Instead of using <img> tag you may use a <div> with centered non-repeating background and then make it fill container with position:absolue;left:0;right:0;top:0;bottom:0 and optional pointer-events:none.

Upvotes: 0

Related Questions