I have created a video background for my website but I am trying to make it cover the entire page.
My HTML:
<header>
<video loop muted autoplay playsinline poster="">
<source src="https://www.gordonmac.com/wp-content/uploads/storm-1.mp4" type="video/mp4">
<source src="http://freshsauce.test/video/FS Website-FINAL-PRORES.mov" type="video/mov">
</video>
<div class="banner">
<div class="banner-text">
Header Text Here
</div>
</div>
</header>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
My CSS:
body{
margin:0;
}
header {
position: relative;
height: 100vh;
min-height: 100%;
width: 100%;
background-size: cover !important;
-webkit-background-size: cover !important;
text-align: center;
overflow: hidden;
z-index:-99;
}
video {
position: absolute;
top: 50%;
left: 50%;
z-index: -100;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
As you can see the <p>yoooooo</p> have a white background. The codepen is https://codepen.io/mrsalami/pen/wjmgze
Use css rule position:fixed; instead of position:absolute; for video tag
video {
position: fixed;
top: 50%;
left: 50%;
z-index: -100;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
I had a play with your CSS and added a few things. I normally remove all margin/padding from all elements at the top of my CSS file.
I then changed your video position from relative to absolute, meaning that nothing will affect it.
I also removed the !important tags. I would recommend trying to avoid these at all costs, unless absolutely necessary. Even then, avoid them at all costs.
* {
padding: 0px;
margin: 0;
}
body{
margin:0;
}
header {
position: absolute;
height: 100vh;
min-height: 100%;
width: 100%;
background-size: cover;
-webkit-background-size: cover;
text-align: center;
overflow: hidden;
z-index:-99;
}
video {
position: absolute;
top: 50%;
left: 50%;
z-index: -100;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
header:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
header .banner {
display: inline-block;
vertical-align: center;
margin: 0 auto;
width: 85%;
padding-bottom: 30px;
text-align: center;
font:24px 'opensans-bold', sans-serif;
font-weight: bold;
}
header .banner-text {
color: #f5f5f5;
width: 100%;
}
You can do some thing like this. give position:fixed to video. it cover and set top, right, bottom, left to 0
https://codepen.io/arpanpatel/pen/rvdjGR
video {
position: fixed;
top: 0;
left: 0;
right:0;
bottom:0;
z-index: -100;
width: 100%;
}
Related
I have a main div called .div1 on top of it I have a fixed div container that contains my fixed div called .fixedDiv. What I'm trying to do is increase the height of class .fixedDiv and make the scroll respond to the height and content of .fixedDiv and not class .div1. How can I achieve this? Thanks in advance.
.div1 {
width: 100%;
height: 275vh;
background-color: gold;
}
.fixedDivCon {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: rgba(43, 45, 46, 0.89);
z-index: 9999;
overflow: auto;
}
.fixedDivCon .fixedDiv {
position: fixed;
top: 50%;
left: 50%;
width: 80%;
/*not working*/
height: 75vh;
background-color: #ffffff;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="fixedDivCon">
<div class="fixedDiv">
</div>
</div>
<div class="div1">
</div>
Try this
.div1 {
width: 100%;
height: 275vh;
background-color: gold;
}
.fixedDivCon {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
/* Enter desired height here */
height: 75vh;
background-color: rgba(43, 45, 46, 0.89);
z-index: 9999;
overflow: auto;
}
.fixedDivCon .fixedDiv {
position: fixed;
top: 50%;
left: 50%;
width: 80%;
height: 100%;
background-color: #ffffff;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
I do not understand why the border around body is not rendering. I believe it has to do with the child div, #pages, having absolute positioning because when I remove #pages the border reappears. How do I fix this?
html {
width: 100%;
}
body {
background-color: green;
background-size: 10%;
width: 100%;
margin: 0;
border-style: solid;
}
#pages {
width: 90%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div id="pages">
REPORT FRAUD<br>
TRACK
</div>
The border does not disappear. It's there but you have no content in the body so it doesn't have what to 'wrap' inside the border. So it appears only like a 'border-top' but in fact is a 4 sided border without any space inside it's borders :)
I say that body has no content because the only element inside it has postion:absolute so the #page doesn't occupy any content.
THere are a few ways to fix this. You can add a height to body of 100vh ( 100% viewport height ). And you will have no problems.
body {
background-color: green;
width: 100%;
margin: 0;
border-style: solid;
box-sizing:border-box;
height:100vh;
}
#pages {
width: 100%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div id="pages">
REPORT FRAUD<br>
TRACK
</div>
try to add 100% to html and body tag
html, body { height: 100%}
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
background-color: green;
background-size: 10%;
width: 100%;
margin: 0;
border-style: solid;
}
#pages {
width: 90%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div id="pages">
REPORT FRAUD<br>
TRACK
</div>
I'm trying to have an image gallery where pictures are displayed on the center of the screen, both vertically and horizontally; the posted fiddle is working fine on Edge, Internet Explorer and (Java Netbeans 8.02) Embedded Web Browser except on Google Chrome.
The problem in Chrome is as follows: if the picture's resolution is higher than the screen picture's edges will not be visible; the idea is to have the picture displayed without losing a pixel.
CSS:
.fullscreenContainer{
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
top: 0; right: 0; bottom: 0; left: 0;
background-color:rgba(0,0,0,0.55);
}
.imageGallery-container {
background-color: white;
z-index: 10000;
margin: auto;
position: relative;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
/* IE 9 */
-webkit-transform: translateY(-50%);
/* Safari */
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.imageGallery-container > img {
margin: auto;
max-width: 100%;
max-height: 100%;
}
HTML
<div class="fullscreenContainer">
<div class="imageGallery-container">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/03/high-resolution-wallpapers-2.jpg">
</div>
</div>
https://jsfiddle.net/mL72yytk/2/
What's wrong with flexbox?
.fullscreenContainer{
position: fixed;
z-index: 10000;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
}
.fullscreenContainer img {
display: block;
max-height: 100vh;
max-width: 100vw;
}
<div class="fullscreenContainer">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/03/high-resolution-wallpapers-2.jpg">
</div>
Don't forget to prefix.
I am trying to get my video to play in the background of my website but for some reason, it gets on top of all of the other content on the site. I don't know whats going on.
CSS
.fullscreen {
position:static;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow:hidden;
z-index: -100;
}
.fullscreen-vd {
position:absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media (max-width: 0px) {
.fullscreen {
background: url('gif.mp4') center center / cover no-repeat;
}
.fullscreen-vd {
display: none;
}
}
HTML
<div class="fullscreen">
<video loop autoplay muted poster="IMG_25062017_221924_0.png" class="fullscreen-vd">
<source src="gif.mp4" type="video/mp4">
</video>
</div>
Try this update some css part and remove some part to get it, And you haven't any width and height to video, so i used 100% height and width for video.
If you used a fixed height and width for video then use fullscreen-vd class to align center vertically and horizontally to your video.
I posted a working snippet, Hope it will help you.
As your requirement fiddle link
body,
html {
width: 100%; /* For take full height and width */
height: 100%;
}
.fullscreen {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
width: 100%;
height: 100%;
}
/* NO NEED BECAUSE YOUR VIDEO IS OCCUPY FULL HEIGHT AND WIDTH */
/* .fullscreen-vd {
position:absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
} */
.content {
color: #fff;
text-align: center;
}
#media (max-width: 0px) {
.fullscreen {
background: url('gif.mp4') center center / cover no-repeat;
}
.fullscreen-vd {
display: none;
}
}
<div class="fullscreen">
<video width="100%" loop autoplay muted poster="IMG_25062017_221924_0.png" >
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/webm">
</video>
</div>
<div class="content">
<h1>
HELLO
</h1>
</div>
I am trying to center an image(door)(within a div) both vertically and horizontally on another div which has a background image.
Have been stuck on this for a while..
This is what i tried so far:
CSS:
html,body{
height:100%;
}
#container{
margin:0 auto;
text-align: center;
height:100%;
min-height: 100%;
height: auto !important;
width:100%;
background: url('http://i.imgur.com/Zd7A3rZ.png') no-repeat 0 0;
background-size: 100% 100%;
}
#background{
margin:0 auto;
text-align: center;
max-height: 100%;
width:100%;
}
#doorDiv{
position: absolute;
top :50%;
left: 50%;
border: solid 4px;
}
Conditions:
I need the door image smaller,like around 25% of the height of the background image.
The whole thing should be responsive
Please don't make any change to the elements.
Here's my fiddle
If you only need ie9+ I suggest you use the transform solution:
http://jsfiddle.net/37zHh/4/
#doorDiv{
position: absolute;
top :50%;
left: 50%;
border: solid 4px;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 25%;
}
and for the door scaling:
#doorDiv img{
max-width: 100%;
}
But as I said above, this only works ie9+ http://caniuse.com/#search=transform
Right o! So I have provided the code that has changed. You can clearly see whats happening here. Just centering the img using absolute and margin: auto then setting a max-width and max-height and that about does it.
HTML:
<div id="container">
<img id="door" src="http://i.imgur.com/iXiL1CS.jpg" />
</div>
CSS:
#container {
margin:0 auto;
text-align: center;
position: relative;
height:100%;
min-height: 100%;
height: auto !important;
width:100%;
background: url('http://i.imgur.com/Zd7A3rZ.png') no-repeat 0 0;
background-size: 100% 100%;
}
#door {
position: absolute;
top: 0;
bottom:0;
right: 0;
left:0;
margin: auto;
max-width:10%;
max-height:25%;
width: auto0;
height: auto;
border: solid 4px;
}
DEMO HERE