I want to repeat a background-image for a div vertically till the bottom of the page.
#repeat {
background: url(repeat-image.png) repeat-y;
height: 100%; /* this does not work, but height: 1024px; does */
}
This does not work. I need to do so according to the page design that I have got. Can this be done?
With regards
Vikram
try to set height:100% for your <body> and <html>, too. if there is nothing except this div on your page, 100% height will be 0px without these settings.
For web pages, height is a funny thing. Since web pages expand vertically, the total height of your page can actually be 0. You may consider using min-height for each element that requires at least a certain height. You can use height: 100% to fill the full height of the parent.
Related
At my page i have a navigation bar to the left that is 100% height and 25% width.
It is working fine, but when there's scroll available, it destroys the background, and make it look ugly. The reason i think is that 100% height is only applied to the active window.
What is the trick to have a div 100% height always, even if the user is scrolling?
Css of the navigation:
width:25%;
height:100%;
float:left;
color:#999999;
I have tried position:absolute with no results, also tried clear both.
Need help :)
Fiddle
Using min-height: 100% instead of height: 100% should fix it. See updated fiddle here: http://jsfiddle.net/zitrusfrisch/Sa6cb/3/
if you want the element to take 100% of the screen use min-height: 100vh
and if you want it to take 100% of the parent element use min-height: 100%
I would rather use:
height: 100%;
overflow: auto;
I had a similar issue when I wanted to build an opaque overlay on top of a webpage. The overlay only covered the height of the browser window, not the total scrolling height of the page. I turned to Javascript to dynamically get the page height.
$('body').append('<div style="width:100%;height:'+document.documentElement.scrollHeight+'px;background:#000000;opacity:0.5;position: absolute;top: 0;z-index: 1000;"></div>')
live (work in progress) site
Basically, I have all of my site's content centered within a div that is a specified width and an intended height of 100% regardless of the actual length of the content. I've specified height:100%; for html, body, and #main however the div still comes up short as seen on this page- I don't want their to be any gap between the #main's grey box and the bottom of the screen. Is this possible? How?
see this jsfiddle
html, body {height: 100%;}
.container {min-height: 100%;}
discussing this over here too.....
proper css to ensure that the body element fills the entire screen
You can set position:absolute, and that should stretch it to the bottom. Seems as if that will work fine in Opera and Chrome at least.
That will, however, be in conflict with the video player below, and also push your copyright notice down below the page. Maybe you can move the notice up into the gray box though?
You can achieve by 2 ways:
1) Give Height to 100% if you don't know how long page could be.
html, body {
height: 100%;
}
.yourContainerClass {
min-height: 100%;
}
2) If you know how much you need to stretch vertically then you can use height in "vh(vertical height)".
.yourContainerClass{
height:80vh;
}
I hope it will help you. Thank you!
I'm trying to have a background image repeat x and y to the bottom of the page.
The background image pattern div is
#pattern {
height: 3000px;
width: 1000px;
background:url(../images/patterns/pattern1.jpg) repeat;
}
In the html, it resides inside
#wrapper {
position: relative;
width: 1000px;
margin: 0 auto;
text-align: left;
}
The height on #pattern is set to 3000px just so it will show up, otherwise the image will not appear.
I have tried various things such as:
height: 100%;
min-height: 100%;
overflow: hidden;
overflow: auto;
I would like the background image to repeat to the bottom of #wrapper, to the bottom of the page.
Webpage is here:
Thanks so much.
You've set a fixed height on the wrapper, so it'll stop at 3000px, regardless of how much content is in there. Try a min-height instead. That'll keep it at a minimum size so it's visible,but allows it to grow to fit the content in it.
Try giving the #pattern a position:fixed; so it doesn't matter how much content you have to scroll, it won't scroll itself.
Side note: repeat is the default property for background image so no need to declare.
Your HTML is wrong. The #pattern div should contain the rest of the page. You want it to grow with the contents.
Your interior divs are all absolutely positioned, making it impossible for them to influence the height of the container #wrapper, which is where you'd want to put your background image code.
Also, I'm not sure if this is intentional, but #pattern doesn't wrap any of your content, so it's height has to be manually set, since it has no children.
There are two approaches you can take. Use Javascript to determine the combined height of your absolutely positioned divs and set the height of the pattern to that number.
Or, you can use float to arrange your columns, and put a at the end to force the parent container to be that tall.
The div tag containing the #pattern style should start on the first line after the body tag and close at the end of the page just before the close of the body tag.
BTW, remove the height and width attributes or set it to 100% so that it repeats throughout the page.
I have a weird problem. The background image (black stripes) in the main container breaks up when the browser window is resized smaller and the user/viewer scrolls up and down (in Safari). The stripes stop stretching down 100%.
#mother {width: 100%; min-height: 100%;height: auto !important; height: 100%; margin: 0 auto; background: url('/img/bg.png') repeat-y center;}
link text
The way to change this horizontally is to set a min-width declaration on the div. Mid-width 100% doesn't work, you need a pixel value.
I don't seem able to duplicate your problem in Safari (or any other browser) vertically - the stripes don't reach the bottom of the page even on first load.
Quite Tricky :)
body { display: table; width:100%}
I'm not aware of a way of directly changing this behaviour myself. Firefox is the same, I think, at least horizontally.
Does it make any difference if you apply the background image to an element that contains #mother? Depending on your page, perhaps you could apply it to the body.
On a customer website, I have to add a background image for only a contained region of the page (its real content part).
The problem is, if the content is short enough, then the image will be clipped. How would be possible to have the image completely visible? I have tried to add the "overflow" CSS attribute but unfortunately it did not help me.
Here is an example of the website I have to work on: http://www.sfp-pensioen.nl/werknemer/welkom The background image is on the div element with id="content".
On the specific link that I am sending it is not an issue because the content is long enough, but if you remove elements using firebug then the problem will become obvious.
ps: IE6 must be supported.
Following on from Graham's answer:
"height" in ie6 acts like "min-height" across other browsers.
min-height: 50px;
_height: 50px;
The example above will provide a cross browser minimum height of 50px. ie6 will read "_height" where other browsers will not. If you don't hacks, use a conditional statement.
Rich
you could either give a height to the id #content
or
apply the background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent; to #mainContent instead of #content
overflow for background-images is impossible, but you could set a min-height for content (or set the image in another div with lower z-index and position it abolutely to appear at the place you want - but thats a very bad solution)
The overflow attribute controls what happens to the div when the content is too big to fit - if you have a fixed-size div with some content that might overflow, you generally want the auto option. overflow has no effect on a background image.
For your case, it sounds like you want to specify a min-height on the content div. Note that this isn't supported by older browsers like IE6, which you may or may not care about. There are plenty of ways to work around this, though.
What you want is the 100% height you can achieve this with the following.
html {
height: 100%;
}
body {
height: 100%;
}
#content {
height: 100%;
}
You need the min-height and the body needs a height so every child element of the body will follow the rule.
Also by adding min-height: 100%; to all css rules will solve all your problems for any grade A browser.
If you know the #sidebar or #main will always have a visual height the same or larger than the background image then you can simply add the background image to:
.sub #wrapper #mainContent {
background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll 0 150px transparent;
}
instead of where it is an the moment on #content