I have a parent div, which contains two other Divs and I'm looking to animate the background-image of the parent div so that it constantly scrolls along the x-axis. The image is 3840px wide and the div is 100% of the browser (1920px). Essentially the image needs to repeatedly scroll whilst not impacting upon the child elements within the parent div, is this possible?
Here is my HTML
<div id="SliderBackground">
<div id="SliderBanner"></div>
<div id="SliderStaticImage"></div>
</div>
Here is my CSS
#SliderBackground
{
width:100%; /*1920px*/
height:500px;
background-image:url(Background.png);
z-index:-1;
position:absolute;
top:90px;
}
Thankyou in advance.
Related
I created a div tag at the beginning of my document in html with specified width and height. Now after closing the div tag, whenever I create other tags like the p tag they are always inside the div tag I created instead of at the bottom of the page.
Do I have to position every element?
How many times do I have to use the relative and absolute positioning in a document?
An absolute positioned element is out of the normal flow of document so it not takes room. You should set dimensions for its relative parent manually to simulate a normal flow. You may use a fixed height in pixels or use aspect ratio Technics for percent dimensions.
A sample of relative div with no size:
#test{
position:relative;
}
#abs{
position:absolute;
}
<div id="test">
<div id="abs">
This div will expand the relative parent with 0 pixels in height
</div>
</div>
This text has overlap with previous element.
A sample of relative div with fixed size:
#test{
position:relative;
height:60px;
background:#ff0000;
}
#abs{
position:absolute;
}
<div id="test">
<div id="abs">
This div is absolute but the parent has its own size
</div>
</div>
This text has no overlap with previous element.
A sample of relative div with aspect ratio:
#test{
position:relative;
padding-top:30%;
background:#ff0000;
}
#abs{
position:absolute;
top:0;left:0;right:0;bottom:0;
}
<div id="test">
<div id="abs">
This div is absolute but the parent has its own aspect ratio 1:0.3
</div>
</div>
This text comes after the previous element.
Finally I have to say that if you are a graphic designer and want to design a web page, you are not ought to design entire the page using relative and absolute elements. You have too many options to design a template using blocks, inline-blocks, tables , flex boxes etc. which regard the normal flow of document.
I am trying to do something that seems like it should be straightforward. I just want to position a div (a rectangle) over a background image. The div will not show as overlaid on top of the background image. The div actually won't show up at all. I've tried using z-index to move the div in front of the image in addition to using position absolute, both with no luck. Here is my html and CSS:
<div id="banner-contact">
<div id="background-contact-info-contact"></div>
</div>
</div>
CSS:
#banner-contact{
width: 100%;
height:1000px;
background-image:url('resized-images-logo/contact-page-resized.jpg');
background-repeat:no-repeat;
background-size:cover;
margin:0px;
}
#background-contact-info-contact{
width:24%;
height:auto;
background-color:#C16C43;
}
height: auto means that the height of the div equals the height of it's children elements. Div's are by default auto in height.
I have a fixed div on the top of the page but the content of the div is not scrolling with the html body on narrowing the window size. Can anybody help me out?
here is the jsfiddle link: http://jsfiddle.net/ALqd6/
css:
.header-container
{
width:100%;
position:fixed !important;
display:block;
overflow:hidden;
top:0;
background:#000;
height:70px;
color:red;
}
html:
<div class="header-container" style="min-width:1200px;margin:0 auto;">
<table cellpadding=19 class="hc-table" style="height:70px;">
<tr>
<td>m-1</td>
<td>m-2</td>
<td>m-3</td>
<td>m-4</td>
<td>m-5</td>
<td>m-6</td>
<td>m-7</td>
<td>m-8</td>
<td>m-9</td>
</tr>
</table>
</div>
</div></div>
According to the position attribute documentation, when you use position: fixed, you "position it at a specified position relative to the screen's viewport and doesn't move when scrolled".
This means that the object will stay in the current position regardless of how you scroll the page vertically or horizontally.
To achieve the result you mentioned, I believe you would need to use a JavaScript method that changes the div's left attribute to reflect the horizontal scroll performed by the user in the case when the window's width is not big enough to fit the whole content.
Some links that could be useful for you regarding this JavaScript approach are:
Horizontal page scrolling using Javascript
Position a Div "Fixed" Vertically and "Absolute" Horizontally within a "Position:Relative" Container Div
CSS how to fix an element to scroll horizontally with the page but not vertically?
How to animate a div move horizontally when page is scroll down?
Possibly this is what you want.
http://jsfiddle.net/vn5Uj/
.header-container{
width:100%;
!important;
display:block;
overflow:hidden;
top:0;
background:#000;
height:70px;
color:red;
}
I am trying to stack two divs A and B.
Div A - will be scrollable but its height needs to be determined by the div underneath it, Div B so if the content in Div B changes, and it's height changes the height of Div A also changes.
Div B - needs to be aligned to the bottom of page on top of a absolute positioned footer. Its content needs to be aligned to the bottom.
I've tried using position relative and float by wrapping these divs in a wrapper, but the whole thing breaks when I try to keep the Div B aligned or positioned absolutely above the footer.
I've got a feeling this needs to go back to basics, any help would be greatly appreciated
thanks
Here's a basic example. I think I have correctly understood your requirement. This example has them appear to be stacked but in the HTML they are not actually stacked, they are nested. I wasn't sure if you could allow that in your solution but fingers crossed.
Example: http://jsfiddle.net/jyR2A/1/
CSS:
#divA {overflow-y:scroll;position:absolute;height:100%;top:-100%;background:green;width:100%;}
#divB {position:absolute;bottom:0;background:blue;width:100%;color:white;}
HTML:
<div id="divB">
<!-- Div A is nested so we can use divB's height -->
<div id="divA">
</div>
<!-- Div B content -->
<div id="divBinnerContent">
Line 1 <br />
Line 2 <br />
..Keep adding more lines to test how it works <br />
</div>
</div>
How it works:
divB is the parent element defining the height of divA. So if we set divB position relative or absolute and place divA inside then we can set divA's height to 100% to give it the height of parent element divB.
Now to position divA we make sure it has position:absolute and set top:-100% which will move it up the same distance as the height of its container divB. Position absolute not only allows us to position it correctly but it also removes it from affecting the height of its parent, divB.
And the content for divB I have made a nice container for it but it is not neccessary. Simply put it anywhere inside divB (but not inside divA) and it will be OK.
You can use the content to define the height,as I have, or use an absolute height set in CSS.
Hope this is what you were after.
Le-roy
I managed to achieve this with help from this question and fiddle.
Stack div elements in css vertically (with dynamic height)
http://jsfiddle.net/nCrEc/334/
Essentially the answer was giving my Div A a height without using the height parameter but instead using absolute positioning on top and bottom. Which meant changes to Div B changed the location of the Div A's bottom (oo er) which pushed the middle div up whenever another populates the bottom area.
<div class="con">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
then using this CSS
.con {
width:200px;
top:50px;
bottom:0;
left:0;
position:absolute;
background:#ff0;
}
.top {
width:200px;
height:20px;
position:absolute;
top:0;
left:0;
background:#f60;
}
.bottom {
width:200px;
height:50px;
position:absolute;
bottom:0;
left:0;
background:#f60;
}
.middle {
overflow-y:auto;
min-height:1px;
position:absolute;
bottom:50px;
top:20px;
left:0;
background:#06f;
}
I have two divs I want to place one inside the other. The parent div has height 100% and is x-scrollable (the content will overflow to the right).
The child div has a repeatable background image set through css.
I want to place it at the bottom of the parent div (above the scrollbar), like a footer but when the scroll is moved this div should stay still.
How can this be done?
Right now I have
.parent{
overflow-x:scroll;
overflow-y:hidden;
width:100%;
height:100%;
position:fixed; }
.child{
height:33px;
width:100%;
bottom:0;
left:0;
background-image:url(<image_path>);
background-repeat:repeat-x;
position:absolute;}
<div class="parent">
<div class="child">
</div>
</div>
The problem I'm having is that the child div moves when scrolling the parent div.
Thanks.
You don't really need the child div unless there's some other content there in addition to the background image. You could do it all in the parent div.
JSBin Demo -------> HERE
After your fiddle... an edit... Forget the background of the child div. Place the background image on the parent div. let the child div be transparent and contain the text.
Updated Fiddle --------> HERE