I am trying to align the video to the center of the image.
.vbackground {
background-image: url('http://s1.postimg.org/hdo0xh2of/image.png');
background-repeat: no-repeat;
width: 600px;
height: 600px;
position: relative;
}
#match {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='vbackground'>
<video controls id='match' width='300' height='300'>
<source src='match.mp4' type="video/mp4" />
</video>
</div>
How could I make the video at the center of the image (from all sides)? It currently gets aligned at the bottom of the image.
Try removing the position: absolute rule from the match id selector and set the text-align property on the .vbackground class to center.
This should work -
.vbackground {
background-image: url('http://s1.postimg.org/hdo0xh2of/image.png');
background-repeat: no-repeat;
width: 600px;
height: 600px;
position: relative;
text-align: center;
}
#match {
/*position: absolute;*/
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Just add margin-left:auto and margin-right: auto; to your #match CSS STYLE and it will align the video to the center of the image.
#match {
margin-left: auto;
margin-right: auto;
}
Related
I have been trying to position the image on top of the image, following StackOverflow question 27609816 (positioning the scalable image on top of another image), but cannot get css to work.
My second image displays inline to the right of the first image.
I'm assigning a class to the second image as follows -
.earth {
position: absolute;
top: 100;
left: 0;
height: auto;
width: 100%;
z-index: 1;
}
#topDiv {
text-align: center;
position: relative;
width: 100%;
height: 205px;
background-image: url(/I/starry_sky.jpg);
background-repeat: repeat-x;
}
<div id="topDiv">
<img src="I/map.jpg" width="900" height="205" align="top"/>
<img class="earth" src="I/earth1.gif" align="top"/>
</div>
/*NORMAL STYLING*/
.main {
text-align: center;
}
.img-1 {
position: relative;
height: 400px;
width: 400px;
object-fit: cover;
}
.img-2 {
height: 300px;
width: 300px;
object-fit: cover;
/*css required to get image on top of img-1*/
position: absolute;
top: 0;
left: 50%;
}
<div class="main">
<img src="https://images.unsplash.com/photo-1593642532744-d377ab507dc8?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" class="img-1">
<img src="https://images.unsplash.com/photo-1628160634750-a81a2a780805?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" class="img-2">
</div>
It's because you must apply position absolute to both of children. Ans this way you can align them. Don't forget that you should give z-index a higher number to the first image.
#topDiv {
text-align: center;
position: relative;
width: 100%;
height: 205px;
background-image: url(/I/starry_sky.jpg);
background-repeat: repeat-x;
}
/* EDITED HERE */
.water {
position: absolute;
top: -10px;
z-index: 1
}
.earth {
position: absolute;
top: 0;
left: 0;
height: auto;
width: 100%;
/* YOU CAN REMOVE Z-INDEX HERE
z-index: 1; */
}
<div id="topDiv">
<img class='water' src="https://picsum.photos/200/300" width="900" height="205">
<img class="earth" src="https://picsum.photos/100/300">
</div>
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%;
}
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;
}
I am trying to make a background video with the fixed height of 700px without affecting the aspect ratio. video can crop. My issue is that the full height of the video is showing even I have provided a height of 700 px. Here is the code:
<div class="video-container">
<div class="video-overlay-text">
<h1>Some heading</h1>
<p>Sentence</p>
</div>
<video autoplay loop muted id="video-bg">
<source src="homepage-video-mp4_1.mp4" type="video/mp4" />
</video>
</div>
here is the CSS:
#video-bg {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
position: absolute;
}
.video-container {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
top: 0;
right: 0;
z-index: 0;
}
.video-overlay-text {
position: absolute;
z-index: 5;
overflow: auto;
bottom: 20%;
left: 4%;
max-width: 700px;
margin: auto;
display: block;
}
.video-overlay-text h1 {
color: #ffffff;
font-size:34px;
line-height: 36px;
}
.video-overlay-text p {
color: #ffffff;
}
I have tried everything. Sometimes the mobile view gets cut and the text moves way up.
I have added max-height which will be helpful for all screen sizes. Also added a demo text to show the limit of the video. Hope this helps.
#video-bg {
position: relative;
width: auto;
min-width: 100%;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
position: absolute;
}
.video-container {
width: 100%;
max-height: 600px;
overflow: hidden;
position: relative;
top: 0;
right: 0;
z-index: 0;
}
.video-overlay-text {
position: absolute;
z-index: 5;
overflow: auto;
bottom: 20%;
left: 4%;
max-width: 700px;
margin: auto;
display: block;
}
.video-overlay-text h1 {
color: #ffffff;
font-size: 34px;
line-height: 36px;
}
.video-overlay-text p {
color: #ffffff;
}
<div class="video-container">
<div class="video-overlay-text">
<h1>Some heading</h1>
<p>Sentence</p>
</div>
<video autoplay loop muted id="video-bg">
<source src="//ak3.picdn.net/shutterstock/videos/2743133/preview/stock-footage-shanghai-china-circa-july-timelapse-video-of-shanghai-china-skyline-at-sunset-circa-july.mp4" type="video/mp4" />
</video>
</div>
<h2>Hello</h2>
I need some help with CSS / Responsive Code. As my window size decreases I need all elements to decrease at the same ratio. Having issues with that. The arrow and the Rooster do no decrease as view port decreases.
The Rooster's shadow of his foot should stay slightly covered by the arrow. The top of the arrow's body (not the point) should stay inline with the divide line between the grey and white sections.
I need some help with CSS / Responsive Code. As my window size decreases I need all elements to decrease at the same ratio. Having issues with that. The arrow and the Rooster do no decrease as view port descreses.
The Rooster's shadow of his foot should stay slightly covered by the arrow. The top of the arrow's body (not the point) should stay inline with the divide line between the grey and white sections.
http://www.bootply.com/fiF4GI3g0n
body {
margin: 0px;
}
.special_box {
background-image: url("http://beta.madrooster.com/images/special_bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
height: 434px;
max-width: 100%;
position: relative;
z-index: 1
}
.special_content {
position: absolute;
margin: auto;
height: 85%;
width: 70%;
top: 0;
}
.rodney {
position: absolute;
margin: auto;
height: auto;
width: 100%;
text-align: right;
top: 4%;
right: 16%;
z-index: 5;
}
.rodney img {
max-width: 315px;
height: auto;
}
.special_arrow {
position: absolute;
margin: auto;
bottom: 0;
left: 0;
z-index: 10;
}
.special_arrow img {
max-width: 916px;
height: auto;
display: block;
}
<div class="special_box">
<div class="special_content"></div>
<div class="rodney">
<img src="http://beta.madrooster.com/images/special_rodney.png" alt="rodney" />
</div>
<div class="special_arrow">
<img src="http://beta.madrooster.com/images/special_arrow.png" alt="arrow" />
</div>
</div>
Responsive Design
Try this. With this code the arrow decreases size according to screen size. You can edit it as you like,
Use #media screen property to display content with respect to screen size
<html>
<head>
<style>
body {
margin: 0px;
}
.special_box {
background-image: url("http://beta.madrooster.com/images/special_bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
height: 434px;
max-width: 100%;
position: relative;
z-index: 1
}
.special_content {
position: absolute;
margin: auto;
height: 85%;
width: 70%;
top: 0;
}
.rodney {
position: absolute;
margin: auto;
height: auto;
width: 100%;
text-align: right;
top: 4%;
right: 16%;
z-index: 5;
}
.rodney img {
max-width: 315px;
height: auto;
}
.special_arrow {
position: absolute;
margin: auto;
bottom: 0;
left: 0;
z-index: 10;
}
.special_arrow img {
width:60%;
height: auto;
display: block;
}
#media screen and (max-width:1800px){
.special_arrow img {
width:98%;
height: auto;
display: block;
}
}
</style>
</head>
<body>
<div class="special_box">
<div class="special_content"> </div>
<div class="rodney"> <img src="http://beta.madrooster.com/images/special_rodney.png" alt="rodney"/> </div>
<div class="special_arrow"> <img src="http://beta.madrooster.com/images/special_arrow.png" alt="arrow"/> </div>
</div>
</body>
</html>
I have figured out a way to do this making the Rooster and arrow images with filler transparent space from the top. Not sure this this the best way, but it works.
http://www.bootply.com/wfxTqAKJfo
CSS Code
body {
margin: 0px;
}
.special_box {
background-image: url("http://beta.madrooster.com/images/special_bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
height: 440px;
width: 100%;
position: relative;
z-index: 1
}
.special_content {
margin: auto;
height: auto;
width: 100%;
top: 0;
position: relative;
}
.rodney {
background-image: url("http://beta.madrooster.com/images/special_rodney.png");
background-repeat: no-repeat;
background-size: 22% auto;
background-position: right 21% top;
height: 440px;
width: 100%;
position: relative;
z-index: 5
}
.special_arrow {
background-image: url("http://beta.madrooster.com/images/special_arrow.png");
background-repeat: no-repeat;
background-size: 64% auto;
background-position: left top;
height: 440px;
width: 100%;
position: relative;
z-index: 10
}
HTML Code
<div class="special_box">
<div class="special_content">
</div>
<div class="rodney">
<div class="special_arrow"> </div>
</div>
</div>
I want to create a responsive background video, but don't know how to change the alignment.
As far as I can see, the alignment currently is bottom right, but I want to change it to center center. (like background-position: center center)
Is there any way to achieve this?
Fiddle: http://jsfiddle.net/66dLhjxh/
HTML:
<video autoplay loop poster="http://demosthenes.info/assets/images/polina.jpg" id="bgvid">
<source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm">
<source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
</video>
CSS:
video {
position: fixed;
display:block;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-color:#fff;
background:url(../img/schrijven.jpg) no-repeat;
background-size: cover;
background-position: center center;
}
try this code DEMO
<div id="info">
Responsive Youtube embed......
</div>
<div class="holder">
<div class="video-container">
</div>
</div>
<button onclick="nextVideo()">Next Video</button>
</div>
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 30px; /* size of chrome */
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container #overlay,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#overlay {
background:#000;
opacity:0.5;
/*background:rgba(255,255,255,0.8); or just this*/
z-index:50;
color:#fff;
}
with this is perfect
video {
position: fixed;
display:block;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-color:#fff;
background:url(../img/schrijven.jpg) no-repeat;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
/*background-position: 30% 50%;*/
}
See it in action.