Experiencing a problem where under a certain window width (around 1100px)
the background video of the title page of my site begins to cause problems. its hard to explain, but an inexplicable gap appears between the first div (titlecontainer) and the one below (aboutcontainer).
The test server address is: mintrain . co . uk
any help would be great. i've read up on simulating background-size: cover for html5 video but it doesn't solve this issue where the div height is finite. thanks, Jack
Instead of having the position be absolute make the position fixed. And that should fix your sizing issue!
#bgvideo {
position: fixed;
transform: translate(-50%,-50%);
background-color: #232528;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
top: 50%;
left: 50%;
}
#media only screen and (max-width: 1000px) {
#bgvideo {
position: absolute;
transform: translate(-50%,-50%);
background-color: #232528;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
top: 50%;
left: 50%;
} }
Related
#logo-center {
max-width: 100%;
height: auto;
display: flex;
}
#media only screen and (min-width:991px) {
.logo-div {
-webkit-margin-start: -5%;
-webkit-margin-end: -15%;
-webkit-margin-before: -6%;
left: 40%;
top: 40%;
right: 40%;
position: absolute;
z-index: 100;
display: flex;
}
}
#media only screen and (max-width:990px) {
.logo-div {
-webkit-margin-start: -5%;
-webkit-margin-end: -15%;
-webkit-margin-before: -6%;
left: 40%;
top: 42%;
right: 42%;
position: absolute;
z-index: 100;
}
}
#media only screen and (max-width:700px) {
.logo-div {
left: 38%;
top: 43%;
right: 40%;
position: absolute;
z-index: 100;
}
}
#media only screen and (max-width:500px) {
.logo-div {
left: 35%;
top: 42%;
right: 40%;
position: absolute;
z-index: 100;
}
}
<div class="logo-div">
<div id="logo-center"><img style="border-radius: 7%;" src="https://www.crockerriverside.org/sites/main/files/main-images/camera_lense_0.jpeg"></div>
</div>
https://jsfiddle.net/8rmL5a7f/
I need to resize image at center (so to be responsive in mozilla/chrome/ie)) and set it at the center of page to cover the cross where the table border meets.
My code works only on firefox, but not in chrome or IE.
Anyone can help me to know why?
As you don't set the width of the image and your image is really big they overflow the wrap div.
Do this:
#logo-center img {
width: 100%;
height: auto;
}
The height:auto will keep the ratio of the image.
On my computer (Windows) at chrome before:
On my computer (Windows) at chrome after:
To centre image in the div:
You will need to make the .table-responsive.bordered.fill and .logo-div the same width and height and than:
#container {
position: relative;
}
#container .logo-div {
postion: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
And please delete the right property on .logo-div.
Basically, the top and left 50% will align in the middle but considering the borders. To put in the middle considering the centre of element you will need to use transform: translate top -50% and left -50% because this will move back based on the child element (.logo-div) size and not the parent (#container) or the border of the child.
PS: You can do it with a negative margin or flexbox (justify-content and align-items on centre). But I normally use this presented solution with translate.
How is it possible to make an video fullscreen responsive.
I've tried it with:
video{
width: 100%;
}
And:
video{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
But I've got only problems with that. I can't put stuff below the video, its too big and small screens are not full with the video ...
Screenshot1
Screenshot2
You need to take margins of the body and set video to 100% width, auto height and position relative. codepen example: https://codepen.io/anon/pen/oMQveO
body {
margin: 0;
}
video {
position: relative;
width: 100%;
height: auto;
}
I'm trying to solve my problem since one week, and I really try everything !
I have a two column layout (left: content / right: description of the content).
I want this two columns full height page and the only way I found is :
body {
margin: 0;
height: 100%;
padding: 0;
}
#rightcol {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
height: 100%;
text-align: right;
}
The closest way to center a div in my columns was to use (in CSS3) flexbox. But there is conflicts with the absolute position of my columns.
Here's the bootply I made to be more explicit :
http://www.bootply.com/1OovYNhx1E#
In this example, I'd like to center (horizontally and vertically) the <h1>TEXT</h1>
UPDATE
Bootply is a terrible tool. So I used Plunker to replicate your example. This includes Bootstrap and everything you had originally except:
.fluid-container and .row are combined.
#inner is now moved out of #leftcol
#inner has the rulesets previously mentioned.
Both columns changed height: 100vh
Added position: relative to body.
Added width:100% and height:100% to html and body elements.
#inner {
position: absolute;
left: 50%;
top: 50%;
bottom: -50%; /* This was added to offset the top: 50% which was keeping the #inner from scrolling any further to the top. */
transform: translate(-50%, -50%);
z-index: 9999;
}
PLUNKER
OLD
Use the following ruleset on your center element:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
You weren't clear as to where this centered div should be center in relation to. If you want it to be centered in relation to viewport, (i.e. edge to edge of screen) then the center div shouldn't be inside any column. I f you want it centered within the left column, then it's in the correct place. Regardless, if you use this solution it will center itself perfectly inside of whatever you put it into.
SNIPPET
body {
position: relative;
margin: 0;
height: 100%;
padding: 0;
}
#leftcol {
position: absolute;
top: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
height: 100%;
width: 50%;
text-align: left;
background: brown;
}
#rightcol {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
height: 100%;
width: 50%;
text-align: right;
background: yellow;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
outline: 3px solid red;
width: 25%;
height: 25%;
background: rgba(0,0,0,.4);
}
<div id='leftcol'></div>
<div class='center'></div>
<div id='rightcol'></div>
Finally find the answer HERE
With flexbox just add to your inner container :
margin: auto;
It will prevent the top scroll problem !
Tried to make a website menu with three full screen background overlays, but background video (underlying) in that menu is shifted down. What is wrong with positioning markup?
CSS:
.videoContainer {
position: relative;
width: 100%;
height: 100%;
//padding: 20px;
border-radius: 1px;
overflow: hidden;
}
.videoContainer video {
min-width: 100%;
min-height: 100%;
position: relative;
z-index: -5;
}
.videoContainer .overlay-vid-1 {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
background: black;
opacity: 0.5;
}
P.s. - tried playing with z-index, position: and <div> reordering, but no luck.
P.p.s. - yes, i know, this is not the whole code, but system informer said that I can`t paste whole code, so there is a link to codepen, thank you.
You need to change the position of your video to position: absolute; because it's being pushed down by the .overlay-content. Try changing your CSS to look like this:
CSS
.videoContainer video {
min-width: 100%;
min-height: 100%;
position: absolute; /* Change to absolute */
top: 0px; /* Set top to 0px */
z-index: -5;
}
Updated CodePen
I have a cover Image in an html page that is wrapped by a div.
The div size is always width:100% height:33%.
I want any arbitrary image to scale to fill without be stretched on any screen size and ratio.
My CSS looks like this:
.headerImageWrapper{
position: relative;
width: 100%;
height: 33%;
overflow:hidden;
}
.coverImageCentered{
min-width: 100%;
min-height: 100%;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
My problem is that the image size is not the mimimum possible that satisfy these conditions.
See the image to understand better
I'm an iOS developer, if you now how it works basically like the contentMode : scale aspect to fill
This is what you looking for.. you can test this solution on the device
http://jsbin.com/joxinizo/4
source code:
http://jsbin.com/joxinizo/4/edit
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.bgd {
position: relative;
width: 100%;
height: 33%;
overflow: hidden;
}
.bgd-cover {
position: absolute;
top: 0;
left: -50%;
width: 200%;
height: 100%;
overflow: hidden;
}
.bgd-cover-img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 13%;
}
UPD: i updated my answer
UPD2:
I don't know if I get right your question, but you may try to experiment with background-size: cover (you won't need wrapper with this one).