I have a overlay using a position absolute element. The overlay element can have more content then what is in the viewport so position fixed is not doing the trick. At the moment the background color of the overlay is only the size of the viewport, and not the browser. And this messes up the content.
Check the plunker for an example, http://plnkr.co/edit/r37LE4BhvW7UkNWPfsJN?p=preview
html, body{
margin: 0px;
height: 100%;
}
.absolute{
position: absolute;
width: 100%;
top:0;
right:0;
height: 100%;
min-height: 100%;
background-color: blue;
}
Change this
html, body{
margin: 0px;
height: 100%;
}
.absolute{
position: absolute;
width: 100%;
top:0;
right:0;
height: 100%;
min-height: 100%;
background-color: blue;
}
to
html, body{
margin: 0px;
height: 100%;
}
.absolute{
position: absolute;
width: 100%;
top:0;
right:0;
**height:auto;**
min-height: 100%;
background-color: blue;
}
The line important is height:auto;
Related
I have the current html structure
<release_cover>
<overlay_controllers> Green Div </overlay_controllers>
<img src="blu.div" />
</release_cover>
And I want to achieve this:
The img tag is the blue container.
The magenta is the release_cover tag.
I have problem in setting the overlay_controller tag (the green) at a 20% height, exactly positioned at 80% of the container.
So far i did:
release_cover{
width: 100%;
height: 100%;
position: relative;
}
release_cover img{
width: 100%;
height: 100%;
}
overlay_controllers{
min-height: 20%;
margin-top: 80%;
position: absolute;
width: 100%;
}
Unfortunately the height of the green div depends on what's inside and not a fixed 20%.
Suggestions?
(example with the suggestions received so far: https://jsfiddle.net/82Lb0nhe/ )
Using a combination of absolute position along with top, while also not allowing a height greater than 300px it will compute correctly:
.container {
width: 300px;
height: 300px;
}
overlay_controllers {
z-index: 2;
bottom: 0%;
position: absolute;
margin-top:;
height: 20%;
width: 100%;
background-color: #fc0;
}
release_cover {
top: 0px;
width: 100%;
position: relative;
display: block;
overflow: hidden;
margin: 0px;
padding: 0px;
max-height: 300px;
}
release_cover img {
padding: 0;
margin: 0px;
z-index: 1;
width: 100%;
height: 100%;
}
Working fiddle: https://jsfiddle.net/fL98w9of/
You could position overlay_controllers using top instead of margin-top property:
release_cover {
width: 100%;
height: 100%;
position: relative;
display: block;
}
release_cover img {
width: 100%;
height: 100%;
}
overlay_controllers {
position: absolute;
top: 80%;
height: 20%;
width: 100%;
overflow: hidden;
}
I have a horizontally and vertically centred image on a page. I would like it so when the user scrolls down, the content below it actually comes up, as if the top content is fixed. Like this effect here... http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/
Only problem is for that effect they use the background-attachment: fixed property. I cannot use this as I need the image to be content (it will actually be changed to HTML5 video).
My code is here... http://jsfiddle.net/5jphd/1/
HTML
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg">
<div class="text">Scroll down</div>
</div>
<div class="wrap">
Here is some content
</div>
CSS
html, body {height: 100%}
body {
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
img {
max-width: 90%;
max-height: 70%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.text {
position: absolute;
bottom: 20px;
left:50%;
margin-left: -44px;
}
.wrap {
background-color: lightblue;
text-align: center;
padding: 100px;
font-size: 30px;
min-height: 1000px;
}
Is this possible to do with this markup? So when you scroll down the content will rise up and overlap the image.
Ok i have done it, this is what I wanted to achieve. I simply made the video and scroll text position:fixed, and made the main body content position:relative - http://jsfiddle.net/5jphd/4/
html, body {height: 100%}
body {
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
img {
max-width: 90%;
max-height: 70%;
margin: auto;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
}
.text {
position: fixed;
bottom: 20px;
left:50%;
margin-left: -44px;
}
.wrap {
background-color: lightblue;
text-align: center;
padding: 100px;
font-size: 30px;
min-height: 1000px;
position:relative;
}
JSFiddle
I think this is what you're essentially asking for. Keep aspect ratios in mind, this is what an hd vieo would probably look like on a 320x480 or so.
#bg {
position:absolute;
position:fixed;
top:0;
width:100%;
height:100%;
margin:auto;
overflow:hidden;
z-index:-1;
}
#bg img { max-width:100%; }
I'm trying to hide the overflow of a circular div. Its child div is hidden from view when outside the container area (good), but remains visible when only outside the radius area (bad)
.outer{
position:relative;
border-radius: 50%;
width: 200px;
height: 200px;
background:#dedede;
overflow: hidden;
}
.inner{
position: absolute;
top:150px;
left:150px;
width: 50px;
height: 50px;
background-color: red;
background:#98de45;
}
Overall I'd like to achieve the effect at http://buildinternet.com/project/mosaic/1.0 but using circles - is there a way to do this?
Fiddle:
http://jsfiddle.net/a9Feu/
Edit: This works fine in Firefox and IE 10, but not Chrome or Safari
Like this?
.outer{
position:static;
border-radius: 50%;
width: 200px;
height: 200px;
background:#dedede;
overflow: hidden;
}
.inner{
position: static;
top:150px;
left:150px;
width: 50px;
height: 50px;
background-color: red;
background:#98de45;
}
I hope this should work
http://jsfiddle.net/a9Feu/35/
.inner{
position: absolute;
**border-bottom-right-radius: 100% 110%;**
top:150px;
left:150px;
width: 38px;
height: 35px;
background-color: red;
background:#98de45;
}
I need to position 3 objects as follows:
Div 1 is a absolute positioned container, with a fixed width, height and position.
Image 1 should be an absolute positioned image, with a fixed align left position only.
Div 2 should be an absolute positioned div, with a fixed align left position only.
I need Image 1 and Div 2 to align to the vertical center of div 1, as these are variable text and image elements with a dynamic height.
Example:
Div 1 is 200px high fixed.
Image 1 is 52px high variable
Image 1 should be vertically positoned:
(200 / 2) + (52 / 2) = 126px
I've looked into CSS table-cell, vertical-align, margin as % and others but was unable to get this working.
Thanks.
.div1
{
position: absolute;
width: 100px;
height: 100px
top: 100px;
left: 100px;
}
.image1
{
position: absolute;
left: 10px;
// something here to align the image in the vertical middle of div1
}
.div2
{
position: absolute;
left: 60px;
// something here to align the image in the vertical middle of div1
}
<div class="div1"><img class="image1"><div class="div2"></div></div>
Updated code:
<head>
<style type="text/css">
.div1 {
background: yellow;
display: table;
position: absolute;
width: 300px;
height: 300px;
top: 100px;
left: 100px;
}
.newdiv {
display: table-cell;
vertical-align: middle;
height: 300px;
}
.image1 {
left: 10px;
position: relative;
width:50px;
height: 80px;
background: blue;
}
.div2 {
position: relative;
background: red;
left: 70px;
width: 100%;
height: 200px;
}
</style>
</head>
<div class="div1"><div class="newdiv"><div class="image1" /></div><div class="div2">123</div></div></div>
Try this, you have to add another div inside your first div:
<head>
<style type="text/css">
.div1 {
background: yellow;
display: table;
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
}
.newdiv {
display: table-cell;
vertical-align: middle;
}
.image1 {
left: 10px;
position: relative;
}
.div2 {
position: relative;
background: red;
left: 6px;
}
</style>
</head>
<div class="div1"><div class="newdiv"><img class="image1" /><div class="div2">123</div></div></div>
UPDATE (I've found another way, without the new div, I didn't test it in IE.):
<head>
<style type="text/css">
.div1 {
background: yellow;
position: relative;
width: 300px;
height: 300px;
top: 100px;
left: 100px;
}
.image1 {
left: 10px;
position: absolute;
width:50px;
height: 80px;
background: blue;
top:0;
bottom:0;
margin:auto;
}
.div2 {
position: absolute;
background: red;
left: 70px;
width: 100px;
height: 200px;
top:0;
bottom:0;
margin:auto;
}
</style>
</head>
<div class="div1">
<div class="image1" /></div>
<div class="div2">123</div>
</div>
.image1,
.div2 {
position: absolute;
top:0;
bottom:0;
margin: auto;
}
jsFiddle
#container{
background:url(images/bg-main.png) repeat-y;
width: 903px;
background-position: 0px 687px;
background-position: bottom;
height: 1200px;
margin-left: auto;
margin-right: auto;
}
#content{
background:url(images/bg-wood.png) repeat-y;
width: 903px;
height: 678px;
margin-left: auto;
margin-right: auto;
}
#content div is inside #container div. I want #container's background to start repeating at 687px from top. Is it possible?
EDIT: Is it possible that first x pixels of div (from top) have emtpy space and after x pixels backgrund starts?
As far as I know it's not possible how you're trying to do it, repeat-x and repeat-y, will repeat the image in both directions along the axis
if you repeat container background full length does the content div background image not cover up the first 678px anyway?
can you provide code in a JSFiddle so we can see what effect you're trying to achieve there will be a way ;)
You can achieve this with pseudo element (::before or ::after) and take advantage of calc() for the offset.
Pseudo element will give you more control and won't affect the content and does not require the need for an extra HTML tag.
Here is a basic example with 100px offset from top:
.background {
height: 300px;
border:1px solid;
position: relative;
}
.background::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: calc(100% - 100px);
width: 100%;
display: block;
box-sizing: border-box;
background: url(//placehold.it/100x100);
}
<div class="background"></div>
You can also use the same techique to offset from left:
.background {
height: 300px;
border:1px solid;
position: relative;
}
.background::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
height: 100%;
width: calc(100% - 100px);
display: block;
box-sizing: border-box;
background: url(//placehold.it/100x100);
}
<div class="background"></div>
Or even from both directions (reversed, too!):
.background {
height: 300px;
border:1px solid;
position: relative;
}
.background::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: calc(100% - 100px);
width: calc(100% - 100px);
display: block;
box-sizing: border-box;
background: url(//placehold.it/100x100);
}
<div class="background"></div>
background : url('image path') 0px 287px repeat-y;
This will repeat vertically your background image from 287px from top.
but another way is to set this to your content div :
margin-top:287px;
you best solution is to do like this :
#container{
position:relative;
}
#background{
background:url('image url');
position:absolute;
top:287px;
left:0px;
z-index:100;
}
#content{
position:absolute;
top:0px;
left:0px;
z-index:99999;
}