This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 3 years ago.
I am loading two fixed body background-images, both set to cover. There is text extending below the page which scrolls; as well as top and bottom navigation icons. As expected, the second background covers the first and it looks like a normal, single loaded background.
In taking tips from previous questions, I have used body {} for the first (now hidden) background-image and body:after {} for the second (on-top, visible, and opacity adjustable) background-image.
I can use CSS body:after {opacity:.5} (or any other value 0->1) to achieve a single desired effect with the top background-image while keeping my text and navigation icons at full opacity. I, however, CAN NOT access the opacity value to change it. Once I am able to do so with the aid of someone more knowledgeable, I should then be able to move forward to dynamically increment a swap of values from 1->.9->.8->etc.->0 to disappear the top background-image using a timer with 11 frames and an appropriate time interval.
My successful code snippets are below along with my failed Javascript attempt at accessing the opacity value.
(P.S.: using #RickardElimää excellent ultimate answer, the top background starts out transparent and thus actually ends up as a fade-in.)
body {
background-image: url('./MyPhoto-1.jpg') ;
position: static; /* to work with Edge 10 */
/* z-index: -2 ; */
background-position: center center ;
background-repeat: no-repeat ;
background-attachment: fixed ;
background-size: cover ;
}
body:after {
content: " ";
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url('./MyPhoto-2.jpg') ;
position: fixed ;
z-index: -2 ;
background-position: center center ;
background-repeat: no-repeat ;
background-attachment: fixed ;
background-size: cover ;
/* arbitrarily set immediately below and needing to be accessed via Javascript */
opacity: .4 ;
}
<script>//PROBLEM with scripting access to above opacity value
// document.body.getElementById("triedDivAndBodyTag").style.opacity = ".8"
document.getElementByID("body:after").style.opacity="0.8";
</script>
I would suggest using CSS variables, because you (for some apparent reason) can't access values of CSS properties through JavaScript. Also, try to use CSS animation as long as possibly because it's better optimized for it.
:root {
--background-opacity: 0.4;
}
body {
background-image: url('./MyPhoto-1.jpg') ;
position: static; /* to work with Edge 10 */
/* z-index: -2 ; */
background-position: center center ;
background-repeat: no-repeat ;
background-attachment: fixed ;
background-size: cover ;
}
body:after {
content: " ";
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url('./MyPhoto-2.jpg') ;
position: fixed ;
z-index: -2 ;
background-position: center center ;
background-repeat: no-repeat ;
background-attachment: fixed ;
background-size: cover ;
opacity: var(--background-opacity);
transition: opacity 1100ms;
}
<script>
document.documentElement.style.setProperty('--background-opacity', 0.8);
</script>
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>
I have an image of lines, as depicted in the small photo below, that I would like to animate with a Tween to make it appear as though it is being drawn from the middle outwards.
I have come up with a good way of doing this, at least theoretically. I have set up my image dimensions and absolute position to be where I want it at the end. I have contained it inside a small absolute positioned div with auto margins and zero width/height that increases with a Tween, so that it expands outwards from the middle slowly and therefore as the container expands it looks like the image is being "drawn" outwards.
However, I have a problem, as demonstrated by the image below. The lines image is positioned relative to the containing div, in the centre, rather than the body (and I understand that this is because they are both absolute positioned). How do I position the child element in the container relative to the body rather than the container, without removing it as a child (there are other layers of my background that would be covered by this div expanding)?
Here is my code:
<div id='cover'><div id='child'></div></div>
CSS:
#cover {
background-image: url('/images/slide21/bg_layer3.png');
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background-repeat: none;
height: 46vh;
width: 78.5vw;
z-index: -8;
position: absolute;
top: 0vw; // these are coordinates that should
right: 0; // be positioned relative to the
left: -0.5vw; // body not container
opacity: 1;
}
#container {
width: 0; // as animation occurs, width and
height: 0; // height increase to 100%
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
overflow: hidden;
z-index: -5;
opacity: 1;
}
Thanks.
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?
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
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