I have this style:
#bkg-evs-1 {
background-color: white!important;
background-image: url("../img/rip-van-winkle-copy8-adj.jpg"), url("../img/Background-events2.jpg");
background-repeat: no-repeat, no-repeat;
background-size: 29% 100vh, 70%;
background-position: top right, 0% 0%;
background-attachment: fixed, scroll;
display: none;
min-height: 2500px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Whenever I try to get the background-size on internet Explorer 11 using:
jQuery(document).ready(function(event) {
var bs = jQuery("#bkg-evs-1").css("background-size");
console.log(bs);
});
I always get 0px 0px, 0px on the console.
Now,
with other browsers I always get the right computed background-size (which depends of the window size), no
problems.
I have tried using pure javaScript as well without results.
I have also noticed that with internet explorer 11, if I use this CSS background-size: 300px 300px, 300px 300px; there is no problems, the computed size will result on the console: 300px 300px, 300px 300px.
And, finally, in internet explorer 11, if I write directly in the console: jQuery("#bkg-evs-1").css("background-size") the console will give me the right values. So, the problem only happens when the page loads.
Am I doing something wrong?
Related
I am using jQuery to make a background image appear fixed (since background-attachment: fixed doesn't play nicely with background-size: cover). In some environments the image doesn't flicker but in others it does, and I can't figure out why. (A related but different question is here, but I'm not using parallax scrolling.)
It doesn't flicker here and on this fiddle:
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('#bg').css('background-position', 'left ' + scrolledY + 'px');
});
body {
height: 3000px;
margin: 0;
}
#bg-wrap {
position: relative;
width: 100%;
}
#bg {
height: 600px;
width: 100%;
position: relative;
background-attachment: scroll;
background-image: url('http://classicescapes.businesscatalyst.com/Images/home-banner/CAPE_RT_desat.jpg');
background-position: left top;
background-repeat: no-repeat;
background-size: cover!important;
}
#bg-text {
position: absolute;
top: 200px;
left: 47%;
font-size: 3rem;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bg-wrap">
<div id="bg">
</div>
<div id="bg-text">Hello!</div>
It flickers here when using Webkit and Edge browsers (but doesn't flicker on IE and Firefox).
Over here it flickers until one initializes a Google Map by clicking on the "Region Map" tab.
Any help as to understanding the cause and providing a possible fix would be greatly appreciated.
Try using:
transform-style:flat
on the css rule of the flickering image
or
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
While I still don't know what is causing the issue on the test page, I fixed my original problem by removing a rogue CSS transform!
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
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;
}
Please look at this page
What I want to achieve is
and
Using following jQ function to dynamically resize div height based on document height
$(window).load(function() {
$('.sideBg').css({ 'height': ($(document).height())});
});
What am I missing?
Wouldn't it be better if you just used the background on the body? This way, you don't even need the additional elements or JavaScript.
body {
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0,
black radial-gradient(ellipse at center, #45484D 0%,black 100%);
background-repeat: repeat-y;
}
Don't forget to use background: black url(/design/img/bg/000.png); for the footer.
And don't forget that you should also have the prefixed versions
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0,
black -webkit-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0,
black -moz-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0,
black -o-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);
before the unprefixed one in the styles for the body.
Works for me if I make these changes via Developer Tools
About compatibility: multiple backgrounds have better support than gradients (multiple backgrounds are supported by IE9, while CSS gradients are not). Actually, this won't work in IE 9 precisely because of the gradient. However, you can make it work in IE9 without the gradient by adding before all the prefixed versions a multiple background fallback (without the gradient).
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
black url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0;
you need to remove the margin-top that is on your .wrapper <div> for the top to be fixed:
.wrapper {
background: url("/design/img/wrapper-bg.png") no-repeat center top;
margin-bottom: 0 !important;
margin-left: auto;
margin-right: auto;
/*margin-top: 20px; remove this */
padding-top: 120px;
position: relative;
width: 1020px;
}
Then for the bottom part i would suggest to get the height of the .wrapper <div>:
$(function() {
var wrapperHeight = $('.wrapper').height();
$('.sideBg').css('height': +wrapperHeight+'px');
});
If you are facing unnecessary padding always use a reset.css file.
Copy the code from here: http://meyerweb.com/eric/tools/css/reset/