The effect I'm trying to achieve is the first main picture on this website: http://shop.soot.me/
As far as I can tell, this is being achieved by background, not <img>. Is it possible to achieve this with the <img> tag? I tried my hand in it, but it's not exactly there.
https://jsfiddle.net/jzhang172/e1javm23/
.box{
width:100%;
height:500px;
background:black;
overflow:hidden;
}
.box img{
max-width:190%;
min-height:100%;
}
<div class="box">
<img src="http://www.hdwallpapersnew.net/wp-content/uploads/2015/12/landscape-desktop-hd-wallpaper-images.jpg">
</div>
Here is a fiddle of code that fills the image to 100% of the width of the box container. https://jsfiddle.net/9pjxeo6o/
Is this what you are looking to do? The website that you referenced actually does use the background property to create the effect that you are talking about. I suspect that this is actually what you are wanting to do, rather than just using an image. This code handles the background cover:
.homepage-hero-video, .homepage-hero-image {
display: block;
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
The background-size: cover; stretches the image to the width of the container automatically.
Related
I have two images which get overlayed on top of each other in my application, these are represented as foreground and background. For both of these I'm using background-attachment: fixed to make sure the images are always the exact same size as each other. This allows me to add an edited version on the foreground, but still keep the two images consistent so they both look like one.
You can see an example of this below;
html,
body {
height: 100%;
width: 100%;
}
.background_container,
.foreground_container {
height: 100%;
width: 100%;
position: relative
}
.background,
.foreground {
background-image: url("https://i.redd.it/uojoraeqr4c31.png");
background-size: cover;
background-attachment: fixed;
height: 100%;
}
.foreground {
max-height: 50%;
margin: 5rem 0;
}
<div class="background_container">
<div class="background"></div>
</div>
<div class="foreground_container">
<div class="foreground"></div>
</div>
The issue I'm having is that I have a need to zoom these images in on an animation. To do this I'm using transform: scale (1.5) on a keyframe, but the more it scales, the more out of sync the two images get. I expect foreground to be scaled the exact same as the background as they are on the same plane due to background-attachment: fixed, but I'm guessing the required height and margin properties cause some issues.
html,
body {
height: 100%;
width: 100%;
}
.background_container,
.foreground_container {
height: 100%;
width: 100%;
position: relative
}
.background,
.foreground {
background-image: url("https://i.redd.it/uojoraeqr4c31.png");
background-size: cover;
background-attachment: fixed;
height: 100%;
transform: scale(1.5);
}
.foreground {
max-height: 50%;
margin: 5rem 0;
}
<div class="background_container">
<div class="background"></div>
</div>
<div class="foreground_container">
<div class="foreground"></div>
</div>
Is there any sort of solution to this? I want example 2 to look like example 1, just more zoomed in.
https://jsbin.com/nesekuxuyu/1/edit?html,css,output
See my jsbin.
Remove your foreground specific styling and add overflow: hidden; to the parent container. It was scaling properly however it was exceeding the bounds of it's parent container and by hiding the overflow you prevent it from distorting the bits you can see.
Edit In outside discussion with James I see the actual issue and am working on an appropriate solution. Scale is overridng the fixed behavior inherent in background-attachment
EDIT: Sorry, I realise it wasn't so clear, I'll try to clarify.
What I searching for is something that helps me to "zoom"/"scale" my background-image within the div when adjusting the height (not the width) of the browser window. (See attached image)
So far I've only managed to get the image to crop but still being centered using the code below.
Anyone have a solution for this?
Image of what I'm trying to achieve:
http://imgur.com/a/zJgF4
.wrap {
height: 50%
background-color: red;
overflow: hidden;
position: relative;
background-size: cover;
}
.image {
position: absolute;
left: 50%;
margin-left: -1020px;
background:url('https://placebear.com/2040/866') no-repeat;
width:2040px;
height:866px;
}
<div class="wrap">
<div class="image"></div>
</div>
I think this is what you are describing.
You can use background-size: cover; so that the image always fills the container.
https://developer.mozilla.org/en/docs/Web/CSS/background-size
This will at least scale the image to the correct proportions. Then you can scale the container how you want.
You can use vh units of measurement to control the height of the image container based on the height of the browser window.
https://snook.ca/archives/html_and_css/vm-vh-units
.wrap {
height: 70vh;
background-color: red;
overflow: hidden;
position: relative;
background: url('https://placebear.com/2040/866') no-repeat;
background-size: cover;
}
<div class="wrap">
</div>
I'm trying to make a background image on the header section autosize but it won't keep to aspect ratios. Here is an example, the image gets the bottom of it cut off: http://i.imgur.com/sxedPHI.png or if I make it this size, space appears between it and the divs below header: http://i.imgur.com/xX1e4GZ.png I can almost seem to get it working but then it scales the picture to an odd aspect ratio and the image gets distorted: http://i.imgur.com/jtxDNr0.png
I would like the header section to be the EXACT same size as the image, then have the image always showing all of the image (not cutting off a portion) and no space between header and the next divs.
This is the code I have for the HTML part:
<header>
T
</header>
I believe this is the relevant CSS:
header {
position: relative;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
background-image: url("ball.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
background-size: 100% auto;
}
The site in question is here:
http://www.stoppiefail.com/boot/sites3/index.php
You are using background-size: 100% auto; at the end which will be overwriting your previous code.
https://jsfiddle.net/26ejdss6/1/
div{
width:400px;
height:187px;
background:url('http://ajgdirect.co.uk/wp-content/uploads/2015/04/football.jpg');
background-size:cover;
background-position:center;
}
Also, check out a neat plugin named backstretch.js. It's pretty nice for this kind of thing, especially when auto-sizing user added images in a CMS
http://srobbin.com/jquery-plugins/backstretch/
Instead of using Background Image why not use an IMG tag with an absolute div on top of it.
HTML:
<header>
<img src="your/background/image.jpg" class="bg">
<div class="headerContent">Your Header Content Goes Here</div>
</header>
CSS:
header {
width: 100%;
position: relative;
}
header img.bg {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
header .headerContent {
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
I havn't tested this but it is just another way to do this outside of css, that would allow the height of the header never to be cut off.
I'm trying to have a full screen image, easy enough with css using the code below.
width:100%;
height:100%;
background: url('photo2.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
but the image is already placed in an html div, see here
<div class="fixed-background">
<img src="photo2.jpg"/>
</div>
It need's to be exactly how it would be using the css version, the only difference would be the image is called in html and not in the stylesheet.
try this
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.myimg {
height: inherit;
}
</style>
<html>
<body>
<div class="fixed-background">
<img src="public/dbs/images/1.jpg" class="myimg" />
</div>
</body>
</html>
Use object-fit: cover; on the <img> tag:
<div>
<img src="photo2.jpg" style="object-fit: cover;"/>
</div>
that parameter is a rather new thing (not all browsers supported), but that's the way to go. See also http://caniuse.com/#search=object-fit
Without using a background, consider this:
#mydiv {
position: absolute;
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
margin-top: -100px; /* (calculate half the height of your image) */
margin-left: -100px; /* (calculate half the width of your image) */
}
Full screen Image? you could do something like this through HTML
<div class="fixed-background">
<img src="photo2.jpg" height="100%" width="100%">
</div>
http://jsfiddle.net/pj73m4po/
EDIT:
or are you looking for something like this?
http://jsfiddle.net/pj73m4po/1/
Try the following: http://jsfiddle.net/pj73m4po/4/
Put your image in a div 100% high and wide. If you don't want your image to be stretched you don't want to use width and height seperately.
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
img {
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
}
Instead use min-width and min-height. if you have a predefined image you can adjust the position in css. If you don't unfortunately you need javascript to center it.
The points that I gather from your css are the following:
Center the image
Fix the position of the image (so it doesn't scroll with the page)
Cover the viewport, scale proportionally to fit
That said, I suggest the following given your html
.fixed-background{
position:fixed;
width:100vh;
height:100vh;
overflow:hidden;
}
.fixed-background > img{
position:absolute;
width:100%;
height:auto;
top: 50%;
transform: translateY(-50%);
}
Honestly, I haven't tested the above but I would suspect you might get some weird results using fixed and absolute positioning together. But since the code defines the width and height directly using viewport units, it should be good. You might need 100vh of margin applied to a sibling element to get things to line up because position:fixed; will break the element out of the document flow.
My page looks like this
<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
</div>
The header has a fixed height.
The main div has a background-image.
I want the main div to be displayed to fill the whole screen, so that the image is displayed at the very bottom.
So I did:
div#main {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
height:100%;
min-height:100%;
}
This didn't work, how can I set a divs height to fill the whole screen?
Another solution would be to set the image to the body:
body {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
}
Here I got the problem, that on scroll the image is not fixed at the bottom. It actually fixed to the height of the windows size.
background-attachment: fixed; isn't the solution either, because the background-image doesn't scroll at all.
Clarification
When the content is too large => There is a scroll bar, the background-image isn't fixed at the bottom anymore. That's the main problem. It's just the background-color of the body
#AndreaLigios
This is what I mean:
SOURCE
Check it out at http://themelandia.ilijatovilo.ch
Resize the window until the content is larger, and then scroll down.
Hopefully you'll see what I mean then.
EDIT: final solution based on your site:
add
overflow: auto;
position: fixed;
to your div#wrapper rule.
EDIT:
New solution: http://jsfiddle.net/SxPyW/2/
added top: 0; , padding-top: 100px; and z-index: 1;
Do you mean this ?
Demo: http://jsfiddle.net/SxPyW/
With absolute positioning, but with image scrolling up when scrolling the page (not the fixed behavior) ?
#main {
/* ... your stuff... */
border: 2px solid blue;
position: absolute;
top: 100px;
bottom: 0;
left: 0;
}
(borders inserted to show boundaries, they overlap each other here, if you need borders adjust the top attribute accordingly)
using the body technique but on the div styling... add the following to your style...
#main {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
background-attachment: fixed;
}
You first need to set the height of the parent element to 100% to make the child element be able to stretch up to 100%
Set the width and height of html, body and #wrapper to 100% like this:
html, body, #wrapper
{
height:100%;
width:100%;
}
Now apply background image in #wrapper(#wrapper is recommended rather than #main but if some part of the image being cut from the top bothers you then use #main)
Here is a sample in jsfiddle.
Updated (r5)
I use another div to contains the background, set its position to fixed and z-index to -1;
#bg-trick {
background: url(http://images1.fanpop.com/images/image_uploads/Naruto-Uzumaki-uzumaki-naruto-964976_692_659.jpg) bottom center no-repeat;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
The demo is updated here http://jsbin.com/idubom/5/edit
Please check the updated [DEMO]1. This is what you are looking for.
DESCRIPTION:
div#wrapper{
height: 100%;
min-height: 100%;
width: 100%;
background-color: red;
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(http://s1.ibtimes.com/sites/www.ibtimes.com/files/styles/article_large/public/2012/08/20/298141-apple-aapl-stock-price-becomes-most-valuable-in-history-but-there-s-st.jpg);
position:absolute;
bottom:0;
}
div#header {
height:80px;
background-color:green;
}
div#main {
padding: 60px 0px;
min-height: 200px;
bottom: 0;
}
div#contentWrap,div#headerWrap {
width:960px;
margin:0 auto;
text-align:center;
}
** The key point is to add position absolute/Fixed on wrapper.
To display a image in full width you need to say body as a 100% of height. Rest seems fine to me in your code.
Here is also updated DEMO May Be this is what you are looking for.
you've already given height 100% to your div, additionaly add an innerHTML to your div because empty divs create such issues.
document.getElementById('my_empty_div').innerHTML = ' ';
Hope that helps.