So I've seen this How do I center an image if it's wider than its container?
I have something like this
.section-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
.section-background-image {
position: relative;
right:-30%;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.section-background-image img {
position: relative;
right:-30%;
min-width: 100%;
max-width: none;
min-height: 100%;
top: 0;
left: 0;
}
<div class="section-background">
<div class="section-background-image " data-stellar-ratio="0.4">
<img src="my_huge_image.png" alt="" style="opacity: 0.3;">
</div>
</div>
And I want the right portion of the image to appear if it does not fit the container, (by default its the top left hand corner portion).
With this code, it doesn't always work on the first browser request (shows top left corner portion of image), but it shows the right positioning on refreshes.
If there won't be text in the div, you can use direction: rtl;
.section-background-image {
....
direction: rtl;
}
For vertical aligning, use below css
.section-background-image img {
...
top:50%;
transform: translateY(-50%);
}
http://jsfiddle.net/afelixj/q4o08e8u/1/
Related
I have some problems with an iframe centering.
The code is setup to keep the same ratio, so it is 100% reposonsive.
This also causes VERY LIMITED possibilies for adding formattiong and - Centering
I have tired to both add a container box, and changing the css styling but I cant seam to get it to work...
any idears
<div class="background background_video">
<div id="video_container">
<div class="youtube-video-container">
<iframe class="youtube-video" src="https://www.youtube.com/embed/8aGhZQkoFbQ"></iframe>
</div>
</div>
</div>
.youtube-video-container {
padding-top: 56.25%;
height: 0px;
position: relative;
}
.youtube-video {
width: 60%;
height: 60%;
position: absolute;
top: 0;
left: 0;
border: 0;
}
.youtube-video-container {
height: 300px; // some height
position: relative;
}
.youtube-video {
width: 60%;
height: 60%;
position: absolute;
bottom: 0;
left: 0;
border: 0;
display: block;
}
as I correct understand question
FROM ANOTHER POST I FOUND...
Thanks for the trying to help anyways guys!
Without knowing the width/height of the positioned1 element, it is still possible to align it as follows:
EXAMPLE HERE
.child {
position: absolute;
top: 50%; /* position the top edge of the element at the middle of the parent */
left: 50%; /* position the left edge of the element at the middle of the parent */
transform: translate(-50%, -50%); /* This is a shorthand of
translateX(-50%) and translateY(-50%) */
}
It's worth noting that CSS Transform is supported in IE9 and above. (Vendor prefixes omitted
In this responsive 16:9 youtube css, all parents of #video_container have to be set to an height 100%.
Click on Run code, then 'Full page' to see the result.
html, body {
height: 100%;
margin: 0;
}
.background_video {
height: 100%;
display: flex;
}
#video_container {
width: 60%;
margin: auto;
}
.youtube-video-container {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
}
.youtube-video-container::before {
display: block;
content: "";
padding-top: 56.25%;
}
.youtube-video-container iframe {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
<div class="background background_video">
<div id="video_container">
<div class="youtube-video-container">
<iframe class="youtube-video" src="https://www.youtube.com/embed/8aGhZQkoFbQ"></iframe>
</div>
</div>
</div>
http://lucasdebelder.be/googledoodle/
I want to have the planet (bottom image) on top of the top image (the blue background/space). I have a main div class:"center" set on 'position: absolute' and around both of those images is separately a div wrapped with position: relative; but somehow they don't want to go and sit on top of each other, I've also tried it with z-index but that doesn't work either.
Thanks in advance.
Use these properties the planeet_achtergrond class:
.planeet_achtergrond{
position: absolute;
bottom: 150px;
}
I would recommend nesting the two images in a div then adding a class to each image. Then use margin: 0 auto to center the div to the page. This is my solution:
#googledoodle {
position: relative;
top: 0;
left: 0;
height:512px;
width:900px;
margin: 0 auto;
overflow: hidden;
}
.galaxy {
position: relative;
top: 0;
left: 0;
}
.planet {
position: absolute;
top: 380px;
left: 0px;
}
<div id="googledoodle">
<img src="http://lucasdebelder.be/googledoodle/images/galaxy.png" width="900" class="galaxy">
<img src="http://lucasdebelder.be/googledoodle/images/planeet.png" width="950" class="planet">
</div>
i changed all css. Here sample:
.center {
position: relative;
text-align: center;
width: 900px;
margin: auto;
overflow: hidden;
height: 500px;
}
.space_achtergrond {
width: 100%;
z-index: 0;
position: absolute;
height: auto;
bottom: 0;
}
.planeet_achtergrond {
width: 100%;
height: auto;
z-index: 100;
position: absolute;
bottom: -15px;
}
form {
position: absolute;
bottom: 15px;
z-index: 999;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
use overflow:hidden outer div.
if you want place divs inside a div with position:absolute, use position:relative for parent div.
if you want to stick a div bottom, use only bottom:0
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 !
I'm trying to split an image into a left and right side. I did this but I want the div to be centered and fill the browser so the images are edge to edge and be responsive. Right now it's all flush to the left.
I put a border so you can see that it's in fact two images put together to make one - 600x900 each.
JSFIDDLE: https://jsfiddle.net/omarel/vnc522vu/3/
HTML
<div id="centercontainer">
<div id="scrollablecontainer">
<img id="leftside" class="halfCompositionLeft" src="https://dl-web.dropbox.com/get/pool_left.jpg?_subject_uid=9047713&w=AAC25lQ4ebCI8ajjRKwfi_TANvxEYQruCRN5PQDEEZ70Uw">
<img id="rightside" class="halfCompositionRight" src="https://dl-web.dropbox.com/get/pool_right.jpg?_subject_uid=9047713&w=AABZnKZrODSr9rGU5kOX7q2EHycNMAqq-mvlUxn0T5tVAg">
</div>
</div>
CSS:
.scrollableSectionContainer section>img {
position:absolute;
}
.centercontainer {
margin: 0 auto;
overflow: hidden;
top: 0%;
right: 0%;
width: 100%;
height: 100%;
opacity: 0;
position: relative;
}
.scrollablecontainer {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%
}
.halfCompositionLeft {
position:absolute;
top:0px;
left:0px;
width:600px;
height:900px;
}
.halfCompositionRight {
position: absolute;
top: 0px;
left: 600px;
width: 600px;
height: 900px;
border:#FFF solid thin;
}
Try this:
#halfCompositionLeft{
position: absolute; //Absolute Positioning.
top: 0px; //Top of the page.
left: 0px; //Leftmost side.
width: 50%; //Fill half the page.
height: 100%; //Fill page vertically.
}
#halfCompositionRight{
position: absolute; //Absolute Positioning.
top: 0px; //Top of the page.
left: 50%; //Start halfway through the page.
width:50%; //Fill rest of page.
height: 100%; //Fill page vertically.
}
That uses CSS percentages rather than pixel values, which dynamically sets size and position based on page size. To complete this, simply make the full box 100% wide and 100% high, and it will fill the page appropriately.
EDIT: CSS for placing div parallel underneath:
#halfCompositionLeft2{
position: absolute; //Absolute Positioning.
top: 100%; //Similar, but at the bottom of the page, under the top div.
left: 0px; //Leftmost side.
width: 50%; //Fill half the page.
height: 100%; //Fill page vertically.
}
#halfCompositionRight2{
position: absolute; //Absolute Positioning.
top: 100%; //Similar, but at the bottom of the page, under the top div.
left: 50%; //Start halfway through the page.
width:50%; //Fill rest of page.
height: 100%; //Fill page vertically.
}
I'm trying to create a div that, when you scale your window, trims the picture. This works, but the image is only trimed on the right, not on the left.
How can I also trim it on the left, so that the picture stays in the middle?
My HTML:
<div class="top-foto">
<img src="http://whatatimeline.com/covers/1330597507de0/balloons-sunset-view-facebook-cover.jpg" alt="Coverphoto">
</div>
And my css:
.top-foto {
position: absolute;
z-index: -1;
width: 100%;
height: 315px;
overflow: hidden;
}
.top-foto > img {
margin: 0 auto;
display: block;
max-width: inherit;
}
http://jsfiddle.net/Rings/quz6a3qq/1/
Position the image absolutely as well and center it using translate
* {
margin: 0;
padding: 0;
}
.top-foto {
position: absolute;
z-index: -1;
width: 100%;
height: 315px;
overflow: hidden;
}
.top-foto > img {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: block;
}
<div class="top-foto">
<img src="http://whatatimeline.com/covers/1330597507de0/balloons-sunset-view-facebook-cover.jpg" alt="Cover photo" />
</div>