I have the following setup:
HTML
<div>
<img src="https://placehold.it/300x300" />
</div>
CSS
div
{
position: absolute;
top: 0;
right: 0;
height: 100%;
}
img
{
height: 100%;
}
When I load the page it renders correctly. However, if I adjust the height of the browser, the left side of the image remains in place while the image expands outside (or shrinks inside) of the viewport.
If I refresh the page then it immediately redraws correctly. The issue appears to be present in all browsers.
I found the following question but not sure if the issue is quite the same. The non-JS solutions didn't work; I didn't attempt any of the JS suggestions.
Does anyone why this might be happening and know of a fix (using CSS) to make the div/image redraw when I resize the browser?
Its because the browser doesnt redraw the div as it does not know it suppose to be 100% wide.
Try this setup:
div
{
position: absolute;
top: 0;
right: 0;
height: 100%;
width:100%;
}
img
{
height: 100%;
position: absolute;
top: 0;
right: 0;
}
Check out this fiddle: https://jsfiddle.net/ash06229/z55827t9/
div
{
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
}
img
{
max-height: 100%;
max-width: 100%;
}
Related
I'm trying to make a div that stretches over the screen and that the user needs to click to dismiss. It works well on computer and Android phones but not on the lesser unit iPhone.
Here is the code:
.hidden-overflow {
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150%;
z-index: 10;
background-color: #FFF228;
}
.overlay.ng-hide-add {
transition: .8s linear all;
height: 100%;
overflow: hidden;
}
.overlay.ng-hide-add-active {
height: 0;
}
<div ng-if="showOverLay">
<div class="overlay" ng-init="overlayShow()" ng-click="overlayRemove()" ng-hide="hideOverlay">
<h1 class="header" data-translate>Welcome!</h1>
<h2 class="header" data-translate>JADA JADA JADA <br>Click to continue</h2>
</div>
</div>
It seems like its the overflow that isn't working. How can I fix this?
Since you're already using an absolute positioned element, I would disregard height and width entirely and stretch the image to the entirety of the page using positioning:
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
#overlay {
background: tomato;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<body>
<div id="overlay"></div>
</body>
Going a step further, you likely want the overlay to not scroll away on longer pages. For this, use position:fixed. This only has the disadvantage of scrolling still being enabled; so if a user scrolls, the overlay will look correct, but once they click it away, they will end up in the middle of the page. Addressing this requires a JS solution that goes beyond the scope of this question.
How do you make a background img that would:
Stretch across the window horizontally
Have a fixed height
Crop height when it's bigger than the content's height (do not shrink)
Currently I have this code that implements #1 and #2 but I can't seem to make it do #3:
<img class="background" src="images/page-background.png"/>
html {
position: relative;
}
.background {
width: 100%;
height: 2800px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
I tried moving the img inside a div with overflow: hidden but that didn't work for some reason:
<div class="background-wrap">
<img class="background" src="images/page-background.png"/>
</div>
.background-wrap {
position: absolute;
width: 100%;
height: 1000px;
overflow: hidden;
z-index: -1;
}
How would you do this properly in CSS / HTML (without JavaScript)?
You could use a css background-image on a div like so:
.background-wrap {
background: url(images/page-background.png) no-repeat;
background-size: 100% 500px;
}
The background-size specifying that;
Stretch 100% across the window horizontally, and have a 500px fixed height (change this to auto if you want the image height to scale in proportion to the width).
Sorry guys, it turns out I completely forgot to remove a duplicate background <img> that I left after splitting my HTML in multiple files (actually PHP files but that's irrelevant).
For the sake of future reference, the following worked for me:
<html>
<head>...</head>
<body>
<div class="background-wrap">
<img class="background" src="images/page-background.png"/>
</div>
</body>
</html>
html {
position: relative;
}
.background-wrap {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
overflow: hidden;
z-index: -1;
}
.background {
width: 100%;
height: 2800px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
I'm trying to display 2 divs side by side in css.
The first div has a variable width (in fonction of the image it contains).
The second one has to take all the remaining width.
The second div contains 3 sections: "top", "middle" and "bottom" whose added height is 100%.
Both divs have a 100% height.
I successfully placed the divs side by side thanks to this question and everything works great when the body has fixed dimensions.
But since I will embed this page in an iframe, I want the divs to occupy all the available space. I would like to avoid setting the body dimensions with javascript...
I decided to add this code to the body:
body {
margin: 0;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
This does the trick on Chrome and Safari: the image has a 100% height which defines its width and the second div stretches until it occupies all the available space. (The caption is displayed over the image)
But when I use Firefox, the first pane is larger than expected (see the red rectangle).
I created a fiddle with the code: http://jsfiddle.net/0w0s6z5n/1/
I can't understand why the behavior is different and what I did wrong on this page. Can someone explain to me why the behavior is different and point me in the right direction to succeed in displaying everything like it currently is on Chrome/Safari.
Thanks in advance for your help.
add
width: 100%;
height: 100%;
to body (yeah, its that simple)!! :)
Problem : container always takes dimension of parent elements, so you have to declare them if you intend to use them in %
css :
body {
margin: 0;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: orange;
width: 100%; /* added */
height: 100%; /* added */
}
Fiddle here
I am not sure this is exactly what you wanted, but from what i understood you need to have the first div with a variable width and the rest should fall in place.
I edited your code: Fiddle here
CSS :
body {
margin: 0;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: orange;
}
.container {
width: 100%;
height: 100%;
background-color: pink;
}
.first {
position: relative;
float: left;
height: 100%;
background-color: red;
}
.second {
height: 100%;
background-color: yellow;
}
.media {
height: 100%;
}
.caption {
position: absolute;
width: 100%;
height: 15%;
right: 0;
bottom: 0;
left: 0;
background-color: grey;
}
.top {
height: 40%;
background-color: blue;
}
.middle {
height: 30%;
background-color: purple;
}
.bottom {
height: 30%;
background-color: green;
}
With this if you change the width of .media , the rest of them fall in place and also works with firefox (Tested).
I'm working on a lightbox. I need it to be dynamically sized based on its content. But I also need it to be centered in the screen. I'm trying something like this:
HTML:
<div class="lightbox-background">
<div class="lightbox">
LIGHTBOX CONTENT
</div>
</div>
CSS:
.lightbox-background {
background-color: rgba(0,0,0,0.9);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 50;
}
.lightbox {
background-color: white;
width: 780px;
z-index: 100;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: auto !important;
max-height: 90%;
}
I couldn't make it work. I'd like to avoid using JS, if possible. How can I do it?
You could work with vertical-align: middle as well as the :before selector on the parent container. Check out my fiddle:
http://jsfiddle.net/GA5K3/2/
The best way that I know to center vertically with CSS is to absolute position top 50% then set a top margin negitave half height of element.
Since you don't know the height you'll have to use JS.
Maybe someone has a better technique.
I am trying to create a gray transparent background screen, on top of my original html page.
What I have done so far is to append a div (with jquery) to the body tag with this css style:
.spesificPropertiesDiv {
position: absolute;
display: block;
top: 0px;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 6000;
text-align: center;
}
as I mentioned before I am appending a div with this class to the body.
Every works fine when I append it on large screen (24 inch) but when I am appending it on 16 inch display the gray screen div's height is 100 px less than the body's height.
One more thing that I need to mention is that on large screen the page is fit on the screen where on the smaller screen a scroll-bar appears to make the page lower side of the page visible.
Why dose this happen? How can I fix it?
Thanks!
I have changed it to:
.spesificPropertiesDiv{
display: block;
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 6000;
text-align: center;
}
and it works!!!!
Thank you all for the help
Could you try:
.spesificPropertiesDiv {
position: fixed; *position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
Additionally, is there any padding on this div? Is it a direct child of the <body> tag?:
<body>
<div class="spesificPropertiesDiv"></div>
</body>