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
Related
I wanna keep the section filled with a background image after the position transform.
Using this code I get a white background from the body element.
<section><div class="firstpage"></div></section>
.firstpage{
position: absolute;
background-image:url('https://i.ibb.co/HGSY9Rv/bcb.png');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height:100%;
width:100%;
}
$(".firstpage").mouseenter(function(){
$(".firstpage").animate({
'background-position-x': '-200px',
});});
$(".firstpage").mouseleave(function(){
$(".firstpage").animate({
'background-position-x': '0px',
});});
https://codepen.io/gamegame/pen/NWMpJvy
make the bg image bigger in the width by using a calculation
the calculation is created by using native CSS calc()/var()
basically, we add the length of the animation to the width
so it will always overflow,
and this is correct since we have a calc() (so it is responsive)
so the animation works fine always bigger and smaller display
100% + 200px
(let's say if the width of your device is 550px, now this calcolation will be 550 + 200 = 750)
and there isn't any need for javascript for animation
because with :hover we can do the same / and transition
code example:
body {
margin: 0;
overflow:hidden; /* for not see the scrollbar */
}
.firstpage {
--x: 200px;
position: absolute;
background-image: url("https://i.ibb.co/HGSY9Rv/bcb.png");
/* not use `attachment: fixed` here */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: calc(100% + var(--x));
transition: background-position-x 0.5s ease-in-out;
}
.firstpage:hover {
background-position-x: calc(var(--x) * -1); /* 200px * -1 = -200px */
}
<section>
<div class="firstpage"></div>
</section>
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);
});
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;
}
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%;
}
The problem I have is that the site keeps giving a big white space on the bottom of the page, any idea why is that happening?
I have this css on the content:
#content{
width: 990px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40px;
position: relative;
}
.full-background {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
and i´m using this script to fit the background image to the window:
function fittobox(){
$('.fittobox').each(function(){
$(this).fitToBox();
})
}
$(window).bind({
'load' : fittobox,
'resize' : fittobox
})
Update with the function
// fitToBox
jQuery.fn.fitToBox =
function(){
var div = this.parent();
var img = this;
var imAR = img.attr("height") / img.attr("width");
var bgAR = div.height() / div.width();
if(imAR >= bgAR){
img.attr("width" , div.width());
img.attr("height" , div.width() * imAR);
}else{
img.attr("height" , div.height());
img.attr("width" , div.height() / imAR);
}
div.css({
"position" : "absolute",
"overflow" : "hidden"
});
img.css({
"position" : "absolute",
"left" : (div.width() - img.attr("width"))/2,
"top" : (div.height() - img.attr("height"))/2
});
img.fadeIn();
};
thanks!
If you remove body height:100% and make the #footer position:absolute there will be no gap.
Really nice picture btw :)
The problem is the position absolute applied (by jquery maybe as its not in the css?) to the full-background div. You have it set to position absolute with a position of top 0. If I disable position absolute on the full-background div the gap goes away.
If all your trying to do is make a full size, scalable image for a background try using the below code. This is using the CSS3 standard and it slightly more elegant.
You can then use the JavaScript to make it fade etc. But this will basically give it a background image for your content, it wont repeat, it is centered vertically & horizontally, as well as fixed in the window. The background size cover will make this all scalable / responsive to the screen size.
#content{
background: url(img/yourbackgroundimage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I also came across a similar problem when using a DropDownList in ASPx. Using position:relative on the DropDownList within a container with a hidden overflow and max-height fixed this problem for me.
Hope this helps