Resize Background Image according to browser height - javascript

How does one accomplish a hero-unit similar to this: http://tribalmedia.co.uk/
I'm curious more than anything as to how this was created. As far I can tell it's more than likely some JS that's applying a min-height percentage value to the class depending on browser height.
EDIT: Try resizing your browser height and you'll see the min-height property is being changed.
Any input would be greatly appreciated!

Just read the CSS:
.site-header {
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
color: #FFF;
min-height: 618px;
position: relative;
}
Demo: http://jsfiddle.net/qwertynl/5a343/

it's just the css stuff.Following is the CSS used by the particular website.
.site-header {
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
color: #FFFFFF;
min-height: 618px;
position: relative;
}

I was able to solve my question using this Javascript!
function resizeHero() {
var windowHeight = $(window).height(),
heroUnit = $(".hero-unit");
heroUnit.css({
minHeight: windowHeight
});
}
$(document).ready(function() {
resizeHero();
$(window).on("resize", resizeHero);
});

Related

Styling images of different sizes to a fixed size grid

I'm using bootstrap inside of React to display a grid of images in fixed size boxes. The images are all of different sizes and I don't want to distort them. The behavior I'm looking for is an image displayed in the center of a fixed size box, say 325X250 with a white(or any color) background. I'm really not a CSS person, thus the question.
This is my React code.
return (
<div className="row">
<div className="image-viewer">
{this.state.overlay}
<ul className="list-inline">
{this.state.images.map(function (image) {
return (<li key={image.src}><a href="#" onClick={this.handleClick} data-id={image.mediaId}><div className="img-container "><img
src={image.src}
className="img-responsive"
alt={image.mediaId}/></div></a></li>);
}, this)}
</ul>
</div>
</div>
);
This is the styling I've done till now,
.image-container{
width: 250px;
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.image-container img{
height: auto;
width: 100%;
}
This clearly doesn't work. I've looked into this link,
How can I make all images of different height and width the same via CSS?
But couldn't get any solution to work to my requirement.
Any help appreciated.
As an alternative to the <img> tag, you could use any block level element and CSS background properties:
background-image: url(http://domain.top/path/to/img.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
The property background-size and the value contain will render a background image to stretch to it's containing element's edges as far as it can without distortion and will maintain original aspect ratio.
SNIPPET
.img {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
outline: 1px dashed red;
width: 325px;
height: 250px;
margin: 10px auto;
}
#bbc {
background-image: url(http://i.imgur.com/4TLlrL3.png);
}
#lena {
background-image: url(http://i.imgur.com/o1RbMvI.png);
}
#normal {
background-image: url(http://i.imgur.com/43uy0hP.png);
}
<div id='bbc' class='img'></div>
<figure id='lena' class='img'></figure>
<section id='normal' class='img'></section>
Try adding 100% to both of them:
.image-container img{
height: 100%;
width: 100%;
}
Adding 100% to both of them will have it go full width of parent element

Background cover while page resize

My page has some animations that sometimes change the page height (on purpose), so initialy when the page is loaded and page height is 100%, the background image covers the page.
But when it runs the animations, the page height can go beyond 100%. The only way to effectively cover all the background is to change background height from auto to a bigger value (e.g. 200%), but doing so i am also changing the page height. In other words, is it possible to cover (dynamically) the page when the animations are running while keeping page height at 100% when animations are not running?
my css code for the background:
background: url(background2.jpg)repeat 5% 5%;
position: absolute;
background-size:cover;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 400;
height: auto;
width: auto;
$(document).ready(function(){
var isAnimating = $("#someid").is(':animated');
//will return true if selected element animating
if(isAnimating == true){
$('#div').css('height','value');
}
else{
$('#div').css('height','value');
}
});
background: url('') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.6;
filter: alpha(opacity=60);/* For IE8 and earlier */
width: 100%;
height: 100%;
overflow: hidden;
hi friends apply this css

Parallax scroll effect with video

I'm learning about the parallax effects and I'm trying to display a video in background instead of an image.
So, I created a good effect using a background image.
This is my jQuery code:
$('[data-parallax]').each(function(){
var $this = $(this),
$window = $(window);
$window.scroll(function() {
var y = -($window.scrollTop() / $this.data('speed')),
background = '50% '+ y + 'px';
$this.css('background-position', background);
});
});
And my CSS:
[data-parallax] {
background-attachment: fixed;
background-color: #fff;
background-image: url('http://lorempixel.com/720/480');
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover;
min-height: 100%;
position: relative;
}
Example: http://jsfiddle.net/7a2ky/show/
Code: http://jsfiddle.net/7a2ky/
I'd like to do the same effect but using a video (http://goo.gl/HcH2cL) instead of an image. Is it possible?
You cant change a background image into a video in CSS,
you need to trick the browser with the zIndex (or use a gif file instead of the video) :
$video.css({"height":"100%",
position:'absolute',
top:0,left:0,zIndex:10
});
http://jsfiddle.net/camus/7a2ky/9/show/
js
$(window).scroll(function ()
{
var yPos=-($(window).scrollTop() / 6);
if($(window).scrollTop()>100)
{
document.getElementById("div1_wrapper").style.backgroundPosition="100% "+yPos+"px";
}
if($(window).scrollTop()<100)
{
document.getElementById("div1_wrapper").style.backgroundPosition="100% 100%";
}
});
css
#div1_wrapper
{
background:url("images/parallax1.jpg") no-repeat;
background-attachment:fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
width:100%;
}
#div2_wrapper
{
background:url("images/parallax2.jpg") no-repeat;
background-attachment:fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
width:100%;
}
if you need to view complete tutorial with demo http://talkerscode.com/webtricks/simple-parallax-effect-on-scrolling-using-jquery-and-css.php

How To Make Full Page Background Image Without Resizing Or Cropping

What I need is what the following site does exactly but it's not a slideshow it's just a fading background image :
http://www.stevenharrisarchitects.com/
The image is 100% in width and 100% in height so no Cropping occurs, and this is what I want exactly.I had managed to do this part very easily with the following codes :
#bg-stat {
background: url('images/LANDING_PAGE.jpg') no-repeat center center fixed;
height: 100%;
background-size: 100% 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/LANDING_PAGE.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/LANDING_PAGE.jpg', sizingMethod='scale')";
}
I made the background-size : 100% 100% ;
It works fine, but the only problem that's left is that my client doesn't want the image to resize with the size of the window, instead it should act like on the site I mentioned above (Try resizing the window and you will see what I mean).
I don't want my background image to re-size to the 100% of width and height of my window, I want it to act just like in the above link I shared.
Also a link to my site :
http://leydenlewis.com/
Any help would be much appreciated.
If you need to use the background property and never want the image to be cropped, you should use background-size :contain;
div.big_background{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url('http://placekitten.com/g/1200/800') no-repeat center top;
background-size :contain;
}
Answer based on problem described above:
#bg-stat {
width: 100%;
height: 100%;
background: url('images/LANDING_PAGE.jpg') no-repeat scroll 0 0 transparent;
background-size: 100% auto;
}
Answer based on feedback:
CSS:
#bg-stat {
width: 100%;
height: 100%;
}
#bg-image {
background: url("images/LANDING_PAGE.jpg") no-repeat scroll 0 0 transparent;
height: 100%;
width: 100%
min-width: 1140px; // Based on img dimensions or arbitrary
max-height: 735px; // Based on img dimensions or arbitrary
}
i think you need below code:
body
{
background: url(image/background.jpg);
background-attachment: fixed;
background-size: cover;
}

How can I stretch content background image to full screen?

I have this HTML. With the following:
<div class="item">
<div class="bg_img"></div>
<h1>morning</h1>
<h2>today</h2>
<p>lorem ipsum.</p>
</div>
Background image to this content CSS:
#container .item .bg_img{background:url('../img/mainpage/demo.jpg') no-repeat;}
This structure is working ok. But I want to attach this background images to body and full screen size. How can I do this via JavaScript or pure jQuery (no plugin)?
Try below code...
#container .item .bg_img{
background: url('/img/mainpage/demo.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use this CSS:
background-size: cover;
Do you mean an image that is related to the context of the body and not of .item?
You can use position:fixed for that. A top, left, bottom and right will ensure it will take the whole page.
background-size: cover will make sure the image itself will cover the page. Depending on the image you use, you might want another solution. Ex: you can center an image and fade to a background color (but that's up to you)
Use a z-Index of -1 to ensure it does not obscure your content
item .bg_img {
background:url('http://www.ninahale.com/wp-content/uploads/2013/08/Post-Enhanced-Campaigns-World.jpg') fixed center center;
background-size: cover;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
Fiddle: http://jsfiddle.net/Aa8fe/
Even i struggled for the same and atlast i got a solution..its below..
body //your container name
{
background-image: url(Images/caramel%20gradient%20for%20website.png);
background-size: 100%;
}

Categories