I'm trying to change my site in a way so that all text is in one page instead of different dirs. In the original the partly transparant background of the container div is scrolling along with the page because otherwise the text would scroll over it. The new page is longer so I thought I would set the background to fixed and just redesign it a bit. But now when I scroll at some point the background disappears. I can't find what is causing this. I'm still learning the ins and outs of using divs, so please, if you know what's causing this, explain it to me in words I understand.
You should to remove height: 100%; from your #home element in your css styles.
Set the background image to another div (#back) rather than to #home.
HTML
<body>
<div id="back"></div>
<div id="home"></div>
</body>
CSS
#back{
position: absolute;
background-image: url('image.jpg');
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Related
I've started with this code. Results as expected, I have a image as the background of my first div, and it takes up the whole space.
<div id="Page1"></div>
<style>
height: 100vh;
background-image: url("/someImageLink");
background-size: 100vw 100vh;
</style
Every thing is fine, now I want to add...
position: fixed;
bottom: 0;
right: 0;
...in the css. Now the background image disappears all the way.
Is it possible to use a <img> to do the same thing as css background-image, or make it clip without it going blank?
Additional Information: I want a few of these divs in a row.They will appear and disappear as needed.
There will be buttons and text within the divs.
Your div does not have a width. It is necessary to add one now that you have changed its position from static to fixed
I've been having problems with my DIV layers - the text goes beyond the DIV footer image, but it's not entirely the DIV background's fault 'cause it DOES repeat... Up to a certain extent. :( I can't seem to figure out how to force the text to stop overextending past the footer DIV tag WHILE keeping the DIV background going.
My "container" element houses the images and the other two elements. The "main" element is where the text goes, and the "footer" element is the image that comes after the end of the text.
In this image here, the text goes over the footer image - green arrow is to show where the footer image starts, red arrow is to show where I'd like the text to stop. The background image in the container works for awhile but then stops, so I suppose it doesn't expand correctly...??
I tried to play around with the code to try and fix it - from trying to add padding-top/bottom, to adding the repeating background stretch in the body part, to playing around with the position properties, to trying out the sticky footer (except my layout is only one column... the navigation is part of the layout in the CSS), I just can't seem to get it right.
This is as best as I can get it. :( Do you guys have any helpful solutions and/or tips?? Thanks so much!
Link: http://bubble-wrapped.net
#container {
position: absolute;
width:1057px;
height: 100%;
background-image:url(layout/bw-div.png);
background-repeat: repeat-y;
border:0px;
text-align:left;
padding-bottom:50px;
}
#main {
position: absolute;
top: 256px;
left: 126px;
width: 830px;
margin: auto;
}
#footer {
height: 358px;
width: 1057px;
bottom: 0;
position: static;
background: url(layout/bw-footer.png) no-repeat;
}
It looks like you've set the footer to a set height, which is why the text is overflowing.
If you're find with cut-off text, try adding a CSS property to the footer: overflow:hidden or overflow:scroll.
If you don't want overflow, then try removing the height property from the footer or setting it to height:auto or something similar.
Has to do with position: tag & height: tag
I suspect it has to do with the element within the container and not just the container.
It would help if you would post most of your code so we can see if other things break it.
Your question doesn't really say what your looking to do, which doesn't help us help you.
If its anything like Possible same situation & answer #StackOverFlow
Hope this helps you!
Im helping a friend with a website and when i resize the browser windows the scroll bar on the right side is not showing up. Is there a fix for this or a way to work around it?
here is the site page im working on
Fixed
Your whole web-page is wrapped inside a DIV with the ID "style" like this:
<body>
<div id="style">
your web-page
<div>
</body>
The CSS for this DIV is:
#style {
background: url(http://upupandfly.com/envie/images/bg_style.PNG) no-repeat;
left: 0px;
min-height: 100%;
min-width: 100%;
position: fixed;
top: 0px;
}
This CSS is causing the problem. You have to either get rid of the fixed positioning, or just try to remove that DIV...
The div#style and html elements are position:fixed, try removing these declarations, and your problem will cease to exist (promise!)
I have this design for an HTML book and i am trying to achieve a certain effect which fading the text when scrolling the page which i successfully done using a fixed div with a superior z-index value and a PNG background image.
.book-bg {
background: url(../../img/book-frame-bg.png) no-repeat fixed center top;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 100;}
But now all my links which covered by the ".book-bg" div aren't clickable, how can i solve this?
Sample page here: http://mmahgoub.com/thebook/chapter-01.html
Thanks
In Firefox, Opera and Chrome/Safari you could use pointer-events: none in your CSS rule. If you need IE compatibility as well then try Forwarding Mouse Events Through Layers.
your links will need a higher z-index, for this they will need to be positioned, relative, floated or fixed.
I have a large div housing my background image. Generally, it will be centered with the sides going off the screen. Because it is background, I don't want scrollbars to show up on the browser- is there a solution here?
Thanks
EDIT: Let me clarify based on the answers:
I have a large image that extends beyond the browser's boundaries, but that I need to assign to a div background or img instead of the body background because I'm manipulating it w jquery, etc.
I know it is not possible for a div's background image to extend beyond its borders.
I also can't use an img or nested div with overflow:hidden because that would hide the overflow, when all I want is for it to not trigger scrolls, i.e. be ignored physically by layout engine but still be shown visually, just like an overflowing body background would.
I just ran into the same circumstance as you do.
After a little experiment I found that it is caused by the wrong value the CSS property 'position'.
When I changed the position setting of the div from 'fixed' to 'absolute', things go as exactly what you want.
This worked for me; I recall learning that it didn't work in Opera, but that was quite some time ago.
html, body { overflow-x: hidden; }
Based on the additional info I came up with this example. The image is the background of a div that fills the whole visible area and pretty much acts just like it's the body's background image (tested in firefox). You could even scroll around the image by modifying the background-position attribute.
<html>
<head>
<style>
#test {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-image: url('http://farm5.static.flickr.com/4121/4805074237_6cf5880f75_o.jpg');
background-position: 50% 50%;
overflow: none;
z-index: -1;
}
</style>
</head>
<body>
<div id="test">
</div>
Here's some other stuff in the body of the page.
<div>
and some stuff in a div in the body of the page.
</div>
</body>
</html>