<div id="subpageMain">
<div id="subpageHeaderImageSection">
<div id="subpageHeaderLeft">
</div>
</div>
</div>
#subpageHeaderImageSection {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 400px;
}
#subpageHeaderLeft {
position: absolute;
left: 0;
top: 0;
float: left;
width: 100%;
height: 100%;
background: url('../theImages/subpageHeaderImage.png') no-repeat;
background-size: 100% 100%;
}
#subpageMain {
position: relative;
margin-left: 295px;
margin-right: 10px;
padding-bottom: 43px;
top: 50px;
}
This is what I see:
Why does IE8 take the background image and stretch it too much that the right content doesn't show and goes out of the screen?
How do I fix it?
IE8 does not support the CSS background-size attribute (see the compatibility table at MDN). To support IE8, you'll need to use an <img> element instead and set max-width: 100%; max-height: 100%;.
IE8 can't stretch the background out of the div. However, it looks like the div with id #subpageHeaderLeft is stretched to the right due to the fact that it has width:100%
Related
I'm using the following code to show a background image on my page:
#bg-pic {
top: 0px;
left: 0px;
position: fixed;
z-index: -1;
margin: 0px;
width: 100%;
}
#bg-pic > img {
width: 100%;
display: block;
}
<div id="bg-pic">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" />
</div>
This works fine once the ratio of the browser window is wide enough. But in case I have a very small window I want the picture still to cover the page so instead of width: 100%; height: 100%; would be correct. How can I fix this?
EDIT: Since the provided answer don't solve my actual problem let's describe it using an example:
Let's assume my picture has dimensions 100x100 and my browser window has dimensions 200x100. Then only the upper 100 pixels are filled with the picture. What I want is that the whole browser window is filled by zooming into the picture (of course then the area on the right and on the left of the picture which corresponds to the right 25 and left 25 pixels of the picture is omitted).
Use the background property instead of an img element.
Demo:
body {
background: url('image.jpg') center center / cover;
}
jsfiddle
In your case:
html, body {
min-height: 100%;
}
body {
margin: 0;
background: url('bg.jpg') center center / cover;
}
You could use the object-fit and object-position properties on the image tag.
Codepen example
#bg-pic{
top:0px;
left:0px;
position: fixed;
opacity: 0.18;
z-index: -1;
margin: 0px;
width: 100%;
height:100%;
}
#bg-pic img {
object-fit: cover;
object-position: 50% 50%;
width: 100%;
height: 100%;
}
You can read more about object-fit at CSS-Tricks : https://css-tricks.com/on-object-fit-and-object-position/
You just have to add height:100vh; in your img style tag,
You can't use height:100% because it won't be applied unless you have specified static height to parent div.
Always a better option to go for vh dimension.
#bg-pic {
top: 0px;
left: 0px;
position: fixed;
z-index: -1;
margin: 0px;
width: 100%;
}
<div id="bg-pic">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" style="width:100%; height:100vh; display: block;"/>
</div>
body { background-image:url("../images/bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%; }
Try this
You can try flexbox like this:
#bg-pic {
top: 0;
left: 0;
position: fixed;
opacity: 0.5;
z-index: -1;
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
}
img {
min-width: 100%;
min-height: 100%;
flex-shrink: 0;
}
<div id="bg-pic"><img src="https://picsum.photos/800/800?image=1069" style="" /></div>
Try this, its cross browser compatible:
div {
position:relative;
}
img {
max-height: 100%;
max-width: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
This assumes you have given a size to the div.
You might be looking for background-size: contain. Paired with height: 100vh should give you desired effect.
If you need the image centered horizontally you can add background-position: 50% 0% or background-position: center; for both horizontal and vertical centering.
#container-with-background {
background: url(https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg);
background-repeat: no-repeat;
background-size: contain;
height: 100vh;
}
<div id="container-with-background">
</div>
If you need your images to be inside your <img> tags you can achieve the same effect with max-width: 100% and max-height: 100% on the <img> tag, and fixed height on the container - height: 500px for example. Setting the height to 100vh will make it fullscreen.
#container {
height: 100vh; /* Can be set to fixed value if needed */
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
}
<div id="container">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg">
</div>
This is so strange that I can't even replicate the error in jsfiddle despite copy-pasting the code.
Basically I have it like this:
<div class="container">
<div class="absolute-background" />
<div class="where-is-this" />
</div>
With this CSS:
.container {
background: transparent;
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.absolute-background {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: blue;
z-index: 0;
}
.where-is-this {
height: 100px;
width: 100%;
z-index: 1000000;
background: red;
}
This should display a red box at the top of the screen, as it does in this fiddle: https://jsfiddle.net/Lmj6d625/
However, in my actual page (on the same browser) the blue covers EVERYTHING. I can even add new divs below with text and they are completely hidden.
Screenshot:
Where is my div?!
Anyone have any suggestions how to troubleshoot this?
The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).
There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.
Thanks to Evert for this answer
1.) DIV Tags can't be self closing
2.) You need a height for the body tag, otherwise it will have 0 height, and that will also apply to container and .absolute-background, making them invisible.
3.) You need position: absolute or position: relative for the z-index of the red DIV to become effective (fixed would also work, but then it wouldn't scroll with the rest of the page)
html,
body {
height: 100%;
margin: 0;
}
.container {
background: transparent;
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.absolute-background {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: blue;
z-index: 0;
}
.where-is-this {
position: absolute;
height: 100px;
width: 100%;
z-index: 1000000;
background: red;
}
<div class="container">
<div class="absolute-background"></div>
<div class="where-is-this"></div>
</div>
I have a container of a given size, and I have an image inside it. I want the image to expand to either 100% height or 100% width, depending on whichever comes last, and I want it to keep its aspect ratio, so anything sticking on over the container is cropped off. If it's cropped on the sides, I'd also like it to be centered.
So to be clear, if it's a very wide picture, it would have height: 100%, and if it's a very tall picture, it would have width: 100%.
For example, here's the container and the image, with is neither sized correctly, nor centered:
https://jsfiddle.net/y5px1ch9/1/
<div class="wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG" class="picture">
</div>
.wrapper {
position: relative;
left: 40%;
width: 100px;
height: 200px;
border: 1px black solid;
overflow: hidden;
text-align: center;
}
.picture {
position: relative;
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
margin: auto;
left: 0;
right: 0;
background-position: center;
}
Anyone know if this is possible to do with CSS?
Since you have a fixed size wrapper, and as object-fit does not have that good browser support, I suggest you use background/background-size on the wrapper
Now, by setting its position, you control where it should get cropped. In below sample I used left top, which means it crops at right/bottom, and in your case, you might want center center, which will crop equally top/bottom or left/right, based on which of the two overflows.
Updated based on a comment
One can also set the image source in the markup, just how one do with the img, here done by setting background-image: url() inline.
.wrapper {
position: relative;
left: 40%;
width: 100px;
height: 200px;
border: 1px black solid;
overflow: hidden;
text-align: center;
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}
<div class="wrapper" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG)">
</div>
And here is the version using object-fit
.wrapper {
position: relative;
left: 40%;
width: 100px;
height: 200px;
border: 1px black solid;
overflow: hidden;
text-align: center;
}
.picture {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
object-position: left top;
}
<div class="wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG" class="picture">
</div>
It is possible but you have to know the aspect ratio beforehand, knowing this you can reserve space for the image
div {
width: 100%;
overflow:hidden;
position:relative;
}
div::after {
padding-top: 56.25%; /* percentage of containing block _width_ */
display: block;
content: '';
}
div img {
display: block;
width:100%;
height:auto;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
<div>
<img src="https://placehold.it/200x300"/>
</div>
The main trick is the padding-top: 56.25%;... the aspect ratio
If you define the image as a background-image, then you can use background-size: contain - this does what you want:
.wrapper {
position: relative;
left: 40%;
width: 100px;
height: 200px;
border: 1px black solid;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG) no-repeat center center;
background-size: contain;
}
<div class="wrapper">
</div>
try this
vertical
.picture {
position: relative;
height: 100%;
width: auto;
margin: auto;
left: 0;
right: 0;
background-position: center;
}
horizontal
.picture {
position: relative;
width: 100%;
height: auto;
margin: auto;
left: 0;
right: 0;
background-position: center;
}
jsfiddle horizontal case
jsfiddle vertical case
please add height property auto and image width in percentage %, in this property you can manage aspect ratio,
width:50%,
height:auto,
I am attempting to make the background div actually 100% with other movable/floating divs that are positioned absolutely.
Width 100% is not accounting for the .floater div being far off the screen. (which the browser shows with scrollbars).
live example of problem: https://jsfiddle.net/h0arax9o/2/
Scroll to the right of the preview.
I would like the purple background to cover the entire document.
html:
<div class="background"></div>
<div class="floater"></div>
css:
.background {
background: purple;
width: 100%;
height: 100%;
position: absolute;
}
.floater {
background: red;
width: 200px;
height: 200px;
left: 1400px;
position: absolute;
}
Edit: for clarity, I would like the background to 'stretch' across the entire page, for example, if it was an image, when you scrolled in the example, the image would scroll as well.
I updated the example to showcase that.
.background {
background: purple;
width: 100%;
height: 100%;
position: fixed;
}
.floater {
background: red;
width: 200px;
height: 200px;
left: 1400px;
position: absolute;
}
<div class="background"></div>
<div class="floater"></div>
.background {
background: purple;
top: 0; right: 0; bottom: 0; left: 0;
position: fixed;
}
.floater {
background: red;
width: 200px;
height: 200px;
left: 1400px;
position: absolute;
}
enter link description here
You need to use a css reset: http://meyerweb.com/eric/tools/css/reset/
If you click on the gear icon on the top right of the css part of jsfiddle you can choose to normalize css. Here's a forked jsfiddle where I did that: https://jsfiddle.net/ckkoq3pn/
_
I have a div with background image put inside another div, instead of fit width parent div, it fit full screen. Please take a look my code to know clearly, sorry for bad english.
http://codepen.io/thehung1724/full/jEEgQq/
HTML
<div id="video-section" class="dark-section">
<div class="home"></div>
<div class="fullscreen-img" style="background-image: url(http://upanh.biz/images/2014/11/23/bg1.jpg)"></div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
#video-section{
margin: 0 auto;
width: 1230px;
height: 500px;
}
.dark-section{
background-color: black;
}
.home{
display: table;
height: 500px;
left: 0;
position: relative;
top: 0;
width: 100%;
}
.fullscreen-img {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: auto;
left: 0;
min-height: 500px;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
Thank in advance.
The .home div needs to be absolutely positioned in order not to "push" the background div downwards. The background div shouldn't have the fullscreen-img class, since most of those rules should be removed. It only needs height: 100% because divs have width: 100% by default since they're block elements. Of course, move the inline styles into a class or ID rules, I left them there just to show you.
That's all you need basically:
remove the .fullscreen-img class from the background div
set its height to 100% instead
make the .home div absolutely positioned
See it here: http://codepen.io/anon/pen/azzexY
*{
margin: 0;
padding: 0;
}
body {
background-color: black;
}
#video-section{
margin: 0 auto;
width: 1230px;
height: 500px;
}
.dark-section{
background-color: black;
}
.home{
display: table;
height: 500px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div id="video-section" class="dark-section">
<div class="home"></div>
<div class="" style="height: 100%; background-image: url(http://upanh.biz/images/2014/11/23/bg1.jpg)"></div>
</div>
UPDATE
Fixes/changes for your website for the problematic element (<div style="background-image: url('images/bg2.jpg');" class="fullscreen-img img-after"></div>):
left: initial;
width: 1230px;