So I have an image which isn't set as the background, but takes up the entire width and almost all of the height. I want this image to remain in it's position and as the user scrolls, the content below scrolls over the top of the image.
I tried using:
position: fixed;
z-index: -1; /* Or another value */
but neither or together worked.
What I have without the position or z-index applied: https://jsfiddle.net/hhcvmrfx/
I want the div container to appear under the image and only overlap the image when the user scrolls.
To overlap the container below only when the user scrolls down, you'll need to set a padding-top value, to your parent .container, equal to or less than the height of the fixed image in question.
Then apply your background colour to the nested div element instead.
body {
padding: 0;
margin: 0;
background-color: #f7f7f7;
overflow-x: hidden;
}
/* Images */
#head-banner-img {
border-bottom: 5px solid #222222;
position: fixed;
}
/* Container Content */
.container {
width: 100%;
height: 500px;
background-color: transparent;
padding-top: 947px;
font-size: 30px;
text-align: center;
position: relative;
}
.container > div {
background: #2c2c2c;
height: 100%;
padding: 50px;
box-sizing: border-box;
color: white;
}
<img src="http://www.thestoryboardz.com/images/background.jpg" alt="Munch Banner" id="head-banner-img">
<div class="container">
<div>Hello</div>
</div>
Set the div's image as a background image instead and give it:
background-attachment: fixed
Related
i want the name in the middle of the page to scroll up as i scroll down, i made the bottom div climb on top of the image with the fixed position but that somehow included the name and subtitle as well. i dont want that.
i have currently 2 container divs
and one div that got the texts inside it
here is the css code:
/thats the first fixed div with the image/
#intro {
display: 100%;
position: fixed;
z-index: -99;
background-image: url('images/la.jpeg');
top: 0;
height: 500px;
width: 100%;
}
/this second div is for the h1 and p
its a child of the intro div with the image. /
.infirst {
display: inline-block;
position: absolute;
margin: 250px 0 0 580px;
}
/and last is the div climbing up on top of both of them /
.about-me {
background-color: #000000;
width: auto;
height: 1000px;
position: relative;
z-index: 1000;
margin-top: 100%;
}
picture of the site
I am trying to overlay some text on an image.
This is easy if the image location and size stays the same, but here I am allowing the image to dynamically resize based on screen size.
http://jsfiddle.net/xcs9L7u6/1/
When I set the position of the text to absolute, the text box is the right size, and I can place it at the bottom of the image just fine, but that doesn't work when the image bottom keeps changing due to window size.
So..
how do I keep the text at bottom of the resizing image height?
keep the text box to the width of the resizing width of the image?
HTML :
<div>
<div class="gallery-background">
<div class="gallery-text">Setting up some text to look at boats and fill space so that things move and wrap but need more text as it didn't quite give the right feel</div>
<img src="http://static.giantbomb.com/uploads/original/0/4530/396796-boat.jpg" class="galleryLrg" />
</div>
</div>
CSS :
.gallery-background {
margin: 1.5rem 1rem 1rem 1rem;
/*needed for firefox and ie*/
height: 100%;
}
.gallery-text {
color: white;
padding: .5rem;
max-width: 100%;
display: inline-block;
text-align: left;
background-color: rgba(0, 255, 0, .65);
position: absolute;
}
.galleryLrg {
display: inline-block;
height: 90%;
width: 100%;
}
Any thoughts would be great,
Thank you.
All you've go to do is to set .gallery-background to position: relative, and gallery-textto position: absolute. From there onwards, maintaining .gallery-text at the bottom of the image is just a matter of setting the bottom, left and right CSS attributes to 0.
Fiddle here
Code to be changed:
.gallery-background {
position: relative;
}
.gallery-text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
just set .gallery-text to bottom: 0 and it will always sit at the bottom:
.gallery-text {
color: white;
padding: .5rem;
max-width: 100%;
display: inline-block;
text-align: left;
background-color: rgba(0, 255, 0, .65);
position: absolute;
bottom: 0; //add
}
and add position:relative to it's parent to keep it contained:
.gallery-background {
margin: 1.5rem 1rem 1rem 1rem;
/*needed for firefox and ie*/
height: 100%;
overflow: hidden; //add to hide excess
position: relative; //add to contain absolute element
}
FIDDLE
JSFiddle
There two points you should modify,add these attributes.
.gallery-background {
position:relative;
}
. gallery-text {
bottom:0;
}
I have the following code:
HTML
<div class="container">
<div class="fixed-area">
<div class="content"></div>
</div>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
html, body, body * {
z-index: 3;
}
div.container {
height: 100%;
position: relative;
background-color: #000000;
z-index: 1;
}
div.fixed-area {
position: relative;
width: 960px;
height: 100%;
margin: 0 auto;
background-color: #ffff00;
}
div.content {
position: relative;
width: 600px;
height: 1500px;
margin: 0 auto;
background-color: #ff0000;
}
The container (black) and fixed-area (yellow) divs do not expand with the content div (red) to cover the scrollable area. When scrollbar is used to view the bottom part of the content, a white background takes the place of the container and fixed-area divs. How can make the container and fixed-area divs expand to cover all background of the content, even when scrolled down?
If .container should have a minimum height of 100%, but should grow with the .fixed-area container, use:
height: auto;
min-height: 100%;
See: http://jsfiddle.net/gopeter/B2Ljt/4/ (shows how min-height works) and http://jsfiddle.net/gopeter/B2Ljt/3/ (shows how .container grows with .fixed-area)
Change container height to auto
Change to your container to this CSS
div.container {
height: auto;
position: relative;
background-color: #000000;
z-index: 1;
}
You had to change your container's height to auto;
You made the container's height 100%, which you didn't want. Simply remove this style.
JSFiddle demo
I am trying to get a full width background or image behind floated items within a max-width container. The page will be responsive so I can't fix the height of the .item objects nor be sure how many will be shown on each row.
I'd like to have a background or image running full length of the window aligned to a position in the .item div. I can use a very long div or image offset to the left without any issue but the right side makes the browser scroll which I don't want.
.bg {
background: red;
bottom: 0;
height: 30px;
left: -1000px;
position: absolute;
width: 2000px;
z-index: 0;
}
Fiddle here: http://jsfiddle.net/K8uAh/4/
The red banner is my background, see how it runs off to the right.
Ideally I would do this just using CSS, I know if I have to go the JavaScript route it all gets a bit clunky on the window resize.
You can use the .container. If you don't want the container to extend the entire width you need to remove overflow: hidden; and add it to an additional wrapper div.
body {
width: 100%;
margin: 0;
}
.container {
overflow: hidden;
}
Hi I tried on your fiddle and altered the width and the left attribute to have percentage instead of px as if we are dealing with px then it will be hard to make it responsive.
Code:
.bg {
background: red;
bottom: 0;
height: 30px;
position: absolute;
width: 125%;
left:-16%;
z-index: 0;
}
Fiddle: http://jsfiddle.net/K8uAh/1/
You can use a clear-fix div at the end of .item.
body {
width: 100%
}
.container{
background: red; /* Change your color here */
margin: 0 auto;
width: 100%
overflow: hidden;
}
.item{
background: #999;
float: left;
margin: 10px 5%;
position: relative;
width: 40%;
}
Fiddle
First : your fiddle css is incorrect :
body {
width: 100%;
}
} /*<- extra closing braces here is ruining your layout*/
see what i mean
second : to have a full width bg use:
background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
background-size :100% 100%;
container class should be :
.container {
background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
background-size :100% 100%;
margin: 0 auto;
max-width: 300px;
overflow: hidden;
}
working demo
I have this container which can scroll the content. I would like the header in this container to always stay in the top.
http://jsfiddle.net/z9ze5/
Container:
.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
overflow: scroll;
position: relative;
}
Header:
.box_header {
width: 100%;
height:30px;
overflow:hidden;
position: absolute;
margin: 0;
background: #DDD;
z-index: 999;
}
If you are willing to alter your mark-up, here is one way of doing it:
<div class="lists">
<header class="box_header">
<h1>HEADER 2</h1>
<div class="setting" id="btn2"></div>
</header>
<section class="content">
<p>Lorem Ipsum ....</p>
</section>
</div>
Wrap your scroll area in a <section> (or other block level element).
For your CSS:
.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
position: relative;
}
section.content {
width: 300px;
height: 220px;
margin: 0 auto;
background: #39C;
position: relative;
top: 30px;
overflow: scroll;
}
Please see fiddle: http://jsfiddle.net/audetwebdesign/nGGXx/
More Advanced Example
If you study the following example:
http://jsfiddle.net/audetwebdesign/fBNTP/
uou can see how your scrolling boxes could be applied in a semi-flexible layout.
I lined up two scrolling boxes side by side and made their width proportionate to the width of the page.
The height is trickier to adjust. I fixed the height of the parent container, see the following rule:
.contentWrapper {
border: 1px solid red;
margin-top: 1.00em;
padding: 30px 0;
overflow: auto;
height: 400px;
}
If you change the height from 400px to some other value, the scrolling boxes will adjust themselves.
Hopefully, these examples will give you and others some more insights into how to build these more advanced layout designs.
If you want a non-css fix, add this listener...
$('.lists').scroll(function() {
$('.box_header', this).css('top', $(this).scrollTop()+'px');
});
and then change .lists css to give relative positioning
.box_header {
width: 100%;
height:30px;
overflow:hidden;
position: relative;
margin: 0;
background: #DDD;
z-index: 999;
}
Any position absolute within a position relative is absolute to the relative container. In order to have a header that stays in position, you'd need to position it above, not within, the scrolling container.
look at adding position: fixed to your header div .box_header. You may have to add padding of the height of the box header div to section.content but as you have that set to 30px that should be fine. IE6 and lower has issues with fixed positioning but hopefully we can live with that now - less people are using that than are still listening to Moby.