Simple question, how do I set up a page overlay (just a semi-transparent black cover) so that it's 100% of the viewport's height and width, including scrollbars?
I've already tried:
body{
background-image:url(../pictures/background2.png);
background-position:top;
background-size:100% 100%;
background-repeat:no-repeat;
margin:0;
border:0;
height:100%;
}
/*Loading*/
#loadingoverlay {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.7);
filter:alpha(opacity = 80);
top:0;
bottom:0;
z-index:99;
}
It only covers the viewport without scrollbars. In other words the moment I scroll down, the content below one screen height doesn't get covered by the overlay.
Obviously this won't work either:
/*Loading*/
#loadingoverlay {
position: absolute;
height:9999px;
width:9999px;
background-color: rgba(0,0,0,0.7);
filter:alpha(opacity = 80);
top:0;
bottom:0;
z-index:99;
}
As that just stretches the viewport into 9999x9999.
The scrollbar is not a part of the "viewport". You're styles and javascript have domain over the viewport but not the scroll bar. You can turn off scroll bars but you can not have an overlay go over it. It's possible to do windowless Flash but that's not an implementation you want.
Related
I'm trying to make the images inside bootstrap carousel responsive in terms of height first, width second. This is because the images I'm adding to the carousel are for the most part of larger height than width although I should write the css where it will look the same regardless of the image dimensions.
I am overriding the class on my styles rather than modifying the bootstrap stylesheet because I prefer to load bootstrap using CDN.
The class I'm adding to my style is
.carousel-inner > .item > img {
position: absolute;
top: 0px;
left: 0px;
height: auto;
max-width: 100%;
}
The height: auto and max-width: 100% works great. The problem I run into is that the .carousel .item has a height of 500px. bootstrap.css line 49.
.carousel .item {
height: 500px;
background-color: #777;
}
I can't give the class shown above a height of auto because the image then is not visible. If I leave it as such, images with a height over 500px get cut off, images smaller will make the carousel seem out of proportion.
Any help on this will be greatly appreciated. Thanks in advance.
This seems to work.
I placed the carousel within a carousel-container div and added the following to my css:
.carousel, .carousel-inner > .item {
display: run-in;
width: 100%;
height: auto!important;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
height: auto;
max-width: 100%;
line-height: 1;
}
.carousel-container {
margin-left:0;
}
I'm trying to figure out why Safari won't read the max-height attribute of its parent as the height. Both Chrome and Firefox will read it correctly, but Safari seems to ignore the parent's max-height and instead grabs the page's full height.
You can see it here
CSS:
body, html {
height: 100%;
margin: 0;
}
div {
height: 100%;
max-height: 300px;
width: 100px;
}
div span {
background: #f0f;
display: block;
height: 100%;
}
Markup:
<div>
<span></span>
</div>
I'm using Safari 6.0.5 on OSX 10.8.5.
This issue happens due to a reported bug in Webkit:
Bug 26559 - When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly
This seems to be fixed for Chrome by now, but not for Safari.
The only non-JavaScript workaround that worked for me, is using an absolute positioning on the parent element:
div {
position: absolute;
}
Demo
Try before buy
Similar problem appears on Safari if parent element uses flexbox properties - container won't take 100% of the height.
Another solution (besides position: absolute;) would be to use vh (viewport height) units:
div {
height: 100vh;
}
So here's the problem. I've set a background image that resizes until a minimun height is reached. At least this is how it behaves in Firefox, Chrome and IE.
body {
min-height: 790px;
min-width: 640px;
overflow: auto;
}
#main {
float: left;
width: 100%;
height: 100%;
background: url(../images/index_bg.jpg) no-repeat center center;
background-size: auto 100%;
}
But in Safari, if I continue making my navigator's window's height smaller than 790px, the background image continues resizing. When my idea is that it should stop at 790px as it does in other navigators. Vertical scroll does appear but of course this is not much help when the background continues resizing.
If you want to check out the whole page for its code, here it is:
http://www.avalon.me/313/
I suggest also setting the min height value of #main. This worked for me in all browsers.
#main{ min-height:790px; }
I currently have this code
#navlogo {
background: url(img/logo.png);
background-size: 100px;
display: block;
height: 98px;
width: 98px;
border-radius: 49px;
}
and I want to add this code
#navlogo:hover {
background:url(img/logoblog.png);
display: block;
height: 98px; /* this doesn't work */
width: 98px; /* this doesn't work */
}
Th original images are 150x150 scaled down and for some reason look better than using 98x98 especially on the iPhone. However, I can't seem to set the background size for the :hover element ....it stays it's original size. I know it can be done with background-size: 98px 98px; but this also isn't compatible with IE8 and lower, and CSS3PIE doesn't cover background-size either. is there anyway to do this or do I have to resize the hover picture?
Try changing the background size from a defined 100px to contain. If you're changing the div size on hover, then the background size will change with it in that scenario.
E.G.:
#navlogo {
background: url(img/logo.png);
background-size: **contain**;
display: block;
height: 100px;
width: 100px;
border-radius: 49px;
}
#navlogo:hover {
background:url(img/logoblog.png);
display: block;
height: 98px; /*this doesn't work*/
width: 98px; /*this doesn't work*/
}
I'm assuming that's what you're going for in this example, as the properties that you're specifying "don't work" in the hover styling are resetting the same values that are present in the normal state styling. Nothing would change given that they are defined exactly the same.
EDIT
If the logoblog image is indeed bigger, setting the background-size property to 'contain' should solve this problem as well.
I'm attempting to use CSS3's resize to make an absolutely positioned div resizable in Safari and Firefox Beta. No matter what I do I can't seem to make it work – are there situations that resize cannot be used?
In order for it to work in Safari, it seems to need overflow:auto applied to the div.
Additionally, the display height and width of the div will act as min-height and min-width.
This only worked for me in Safari, not in Firefox 3.5.
<div id="box"> Nice box </div>
CSS:
#box {
/* important */
resize: both;
overflow: auto;
/* Styling */
background: red;
position: absolute; /* per the question */
top: 50px;
left: 50px;
width: 300px
}