I wish to achieve the following effect, regardless browser (re)size:
The images are set to be flexible, so, each of them as a max-width declared as:
100%.
http://jsfiddle.net/rgdrqbg4/
The css:
img {
max-width: 100% !important;
vertical-align: middle;
}
.home-video {
position: relative;
width: 57.291666666667%;
}
.video-placeholder {
position: relative;
left: 0;
top:0;
}
.play-video {
position: absolute;
left: 32.545454545455%;
top: 22.508038585209%;
}
Can someone please point some directions, or name some common used techniques to overlay two images while keep them absolute centered, regardless the viewport width?
A common technique is to set top and left to 50% and set margin-top and margin-left negative half of the height and width of your image.
Try this:
.play-video {
position: absolute;
top: 50%;
left: 50%;
margin-top: -90px;
margin-left: -97px;
}
Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/1/
UPDATE
You can also set top, left, right, and bottom to 0 and set margin to auto for it to auto calculate the margin needed to center the image.
.play-video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/5/
This will only work if the image inside is smaller than the image that is wrapping it.
UPDATE
You are setting width for .home-video. At some point in the viewport, the container has more width than the image so the black box is centering accoring to the container, not to the parent image. To make the .home-video container have the same width as its larger image you can use this:
I added a width of 30% to the black box so it can shrink with the larger image too.
.home-video{
display: inline-block;
}
.play-video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 30%;
margin: auto;
}
And remove the width you set before.
Working JSFiddle sample: Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/9/
img {
max-width: 100% !important;
vertical-align: middle;
}
.home-video {
position: relative;
width: 57.291666666667%;
}
.video-placeholder {
position: relative;
left: 0;
top:0;
}
.play-video {
position: absolute;
left: 32.545454545455%;
top: 25.508038585209%;
width: 34%;
height: 40%;
}
<div class="home-video">
<img class="video-placeholder" src="http://lorempixel.com/570/320/" alt="video"/>
<img class="play-video" src="http://lorempixel.com/194/180/cat/" alt="play this video"/>
</div>
Do you mean like this? You were on the right track.
.play-video {
position: absolute;
top:20%;
height:inherit;
left:28%;
width:40%;
margin:0 auto;
}
http://jsfiddle.net/rgdrqbg4/7/
Related
I am trying to build a page that will display a .png image of a computer (with a transparent screen), which I can then layer a website screenshot behind and scroll through, to give the effect of scrolling a real website.
For example, this page, but it can be with a scrollbar instead of automatic scrolling: http://preview.themeforest.net/item/fwrd-music-band-musician-wordpress-theme/full_screen_preview/12087239
I've actually managed to achieve the required, but I can only scroll the long website image (#instagram) when I 'inspect' the page. I assume the #laptop image is blocking the #instagram image somehow?
#container {
position: relative;
top: 0;
left: 0;
}
#instagram {
z-index: 1;
width: auto;
height: 400px;
border-radius: 5px;
overflow: scroll;
position: absolute;
top: 0px;
left: 0px;
}
#laptop {
z-index: 2;
width: auto;
height: auto;
position: relative;
top: 0;
left: 0;
}
You could use a pseudo element with pointer events none for your laptop and then just position your scrollable background where the screen is:
.laptop {
position: relative;
/* width and height of laptop image */
width: 584px;
height: 360px;
}
.laptop:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(https://pngimg.com/uploads/laptop/laptop_PNG5938.png) left top no-repeat;
background-size:cover;
z-index:2;
pointer-events:none;
}
.background {
/* width and height of screen */
width:414px;
height:229px;
overflow:auto;
position:absolute;
/*POsition of screen in image */
top: 28px;
left:82px;
}
<div class="laptop">
<div class="background">
<img src="https://www.fillmurray.com/412/600">
</div>
</div>
This pen probably explains my problem best:
http://codepen.io/anon/pen/xwQpLy?editors=110
I'm using the following trick to keep the box constrained to a 1:1 ratio:
.squarebox {
position: relative;
width: 100%;
}
.squarebox::before {
padding-bottom: 100%;
content: "";
display: block;
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
But, I'd like the box to always fill the parent's width or height, whichever is smaller. In the above example, the box only ever fills the parent's width.
Do you mean like this?:
http://codepen.io/anon/pen/yYQpqp?editors=110
The parent needs to be position:relative, the .content div needs to be width:100%; height:100%; as well as position:relative with top, right, bottom and left set to 0.
I stripped out the squarebox div.
.squarebox {
position: relative;
width: 100%;
}
.content {
width:100%;
height:100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:orange;
}
I have 3 divs inside my div#all (simple html). Left - Main - Right.
Left & Right have just a background image (their content won't change).
Main div will have all my text etc.
Option 1: I need to have the left/right divs to expand their height (so my image background gets repeated) to reach the height that my divMain may have.
Option 2: I can do position:fixed my Left/Right divs as well so they stay in place when I scroll. My issue on this plan is that I cannot position/float my right div at the desired place.
Any working option is ok with me.
css code:
body{
margin: 0 auto;
padding: 0;
width: 100%;
background-color: #fff;
overflow-y: auto; overflow-x: auto;
}
#all{
position: absolute;
top: 0; left: 50%;
height: 100%; width: 1366px;
margin-left: -683px;
}
#temp-left{
position: absolute;
top: 0; left: 0;
height: 100%; width: 183px;
background: url(image/bg-lft.jpg) repeat;
}
#temp-right{
position: absolute;
top: 0; right: 0;
height: 100%; width: 183px;
background: url(image/bg-rgt.jpg) repeat;
}
#main{
position: absolute;
top: 0px; left: 50%;
height: 100%; width: 960px;
padding: 10px;
margin-left: -500px;
text-align: justify;
}
If I properly understand your question i suggest you to use jquery
You can try this out.
$(document).ready(function() {
// Check if body height or width is higher than window height and width:)
if (($("body").height() > $(window).height())||($("body").width() > $(window).width())) {
$('body').css('background-image', 'url(image/bg-lft.jpg) repeat;');
}
else
$('body').css('background-image', 'url(image/bg-lft.jpg) no-repeat;');
});
I want my div.container to be 100% height to fill the whole screen.
I've tried a few things, min-height, body height 100% and all of them seperate but it just won't work.
Here is the link : http://jquery.colinvaneenige.nl/test/
So .container with 100% height while still being in the center of the page! :)
Thanks in advance,
You can make it position: absolute at set the top and bottom to 0:
#container {
width: 400px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: red;
margin: 0 auto;
}
Fiddle Demo 1
..or
body,html {
min-height: 100%;
height: 100%;
}
#container {
width: 400px;
height: 100%;
background: red;
margin: 0 auto;
}
Fiddle Demo 2
Using position: absolute and set height: 100% instead of min-height.
.container {
position: absolute;
height: 100%;
}
You then will have to use other CSS tricks to get it back to centered, such as let's say your width of the container is 1000px:
.container {
width: 1000px;
left: 50%;
margin-left: -500px; /* negative half of the total with of the container */
/* And code from above line */
position: absolute;
height: 100%;
}
I've only ever been successful with this by creating a table with a single cell that is 100% height, then placing your div within that.
It's not possible, height must be in pixel :/
Only % for width :)
You can make a " min-height: 100px; "
I am trying to get into responsive design/layout with Bootstrap and CSS, but I am kind of confused of how could a change a box to be in the center of the screen.
I have a login pane that in Google Chrome has size 277x256 (that size could fit many smartphone screens). So I made a CSS like that:
.login .pane {
position: absolute;
top: 50%;
left: 50%;
margin: -128px -138.5px; /* half of the size in Google Chrome */
background: #f0f0fd;
background: rgba(240,240,253,0.90);
padding: 22px 32px;
}
You can see the complete code in: http://jsfiddle.net/H5Qrh/1/
=== UPDATE ===
I made a cleaner code and tried using Absolute Centering instead of Negative Margins:
.center-pane {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 277px;
height: 320px;
}
My updated Fiddle: http://jsfiddle.net/H5Qrh/3/
Now the footer is above the box.. that shouldn't occour.
You're using absolute but I'd change that to fixed (this will work on both).
I set your height and widths, but you can change them, and because you want it responsive, you can change them with a few media queries. For example mobile you might want width to be 90% or 100%.
.login .pane {
position: fixed; /* could be absolute */
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
width: 300px;
height: 250px;
}
Here's a jsfiddle