Background-Image Opacity Issue - javascript

I am working on a Homepage right now, and got a few Problems.
I got a Background-Image set to Cover in the Body:
body{
opacity: 1;
transition:opacity 0.5s ease-out;
background-image: url(Background.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Now I want that to change the opacity of the whole body-tag to 0 with javascript.
$("body").css("opacity", "0");
Everything disappears except the background-image, although it's in the body-tag?
Any Ideas?
UPDATE!!
I uploaded the "problem-site" to a webspace.
Website
Just click on "Query" than click in any box and press ENTER to call the js-function.
Thanks!!

I've made a fiddle with your code that reproduces the issue. Code can be simplified into this:
body{
opacity: 0.1;
background-color: red;
}
The root issue is that fiddling with the opacity of the <body> element doesn't have any effect unless you have something below. A simple fix is to add this:
html{
background-color: white;
}
Updated fiddle

For whatever reason (I can't seem to find any references to why), setting opacity:0 or visibility:hidden on the <body> tag has no effect on the background-image. It definitely has an effect an element with a background-image that is a child of the body tag. So you have two options:
Add a wrapper <div> around the <body> content:
Where you currently have:
<body>
<!-- Content -->
</body>
Change this to:
<body>
<div id="wrapper">
<!-- Content -->
</div>
</body>
And move the CSS on body to #wrapper as well any Javascript/jQuery targeting body
Set the opacity on the HTML element
Wherever you are setting opacity:0, do it on the <html> element instead.
Personally, I'd recommend the first option.

Related

HTML/CSS: Website in Firefox not displaying background, Chrome displays as intended

I have a site that I used chrome developer tools to get working. However, when checking the site in Firefox, the background image is only viewable in a small strip in the middle of the page.
the code for my background image is the following:
body {
background-image: url(../assets/headerbackground.jpg);
min-height: 0px;
-webkit-background-size: 100vmax;
-moz-background-size: 100vmax;
-o-background-size: 100vmax;
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/headerbackground.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/headerbackground.jpg', sizingMethod='scale');
}
Any help would be appreciated. Not sure how to troubleshoot this.
UPDATE:
Found the solution to my problem: My <body> had elements that were making it sandwich between the header and footer. Removing those elements from <body> did the trick.
You should be able to shave off the vendor prefixes, contain and cover have been well adopted for some time now.
https://caniuse.com/?search=background-size
body {
background-image: url('../assets/headerbackground.jpg');
background-attachment: fixed;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
In addition to this, as a rule of thumb, I would remove the styling from the body tag and wrap the content of your site in something like <div id="app"> ... </div>. The <html> and <body> tags are rendered differently in each browser more than likely this is what is causing your site to display differently in separate browsers.
RMZ

jQuery.Lazy() - lazy load background image of section with id

I want to apply lazy loading for one image with method .lazy() for a section with id. The section has configured background via CSS. Below is code:
HTML
<section id="showcase">
</section>
CSS
/* Showcase*/
#showcase {
min-height: 400px;
background: url("../img/example.jpg") no-repeat -300px -500px;
background-size: cover;
}
JS
<script>
$(function() {
$("#showcase").lazy();
});
</script>
How should I change the code? Because now it doesn´t work. It is working only when I have a code and a tag <img class="lazy" data-src="../img/example.jpg" /> as you can see in an example below:
http://jquery.eisbehr.de/lazy/example_basic-usage
According to the JQuery.Lazy docs and demos in their website, you could load background images by setting the data-src attribute to the element on which you want to load the background image.
So in your case you could do as follows:
<section id="showcase" data-src="../img/example.jpg"></section>
Then you will need to remove the background-image definition from the css style.
You can check their working example on their website.

Working with interactive-background.js

I was trying to get a parallax effect on my website's landing page. I used the interactive_bg.js plugin and working backwards from the demo tutorial I was finally able to get the picture I want with the desired effect.
Here's my code:
HTML -
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
</body>
CSS -
html {
height: 100%;
}
body {
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.wrapper { // this class isn't really needed but I thought it may help when putting other elements atop this div.
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.bg {
position: absolute;
min-height: 100% !important;
width: 100%;
z-index: 0;
}
.ibg-bg {
position: absolute;
}
Js -
$(document).ready(function(){
$(".bg").interactive_bg({
strength: 20,
scale: 1.00,
contain: false,
wrapContent: true
});
});
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})
I reverse engineered the tutorial files to find this code.
Now the problem is, anything that I put into the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> messes up the picture. Any div I want to put after the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div doesn't even show up on the screen but is rather behind the background image.
How do I put text and other divs on the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div and more content after that div ends?
I have tried z-index and positioning (by looking at the code from the tutorial). It doesn't seem to work.
Also, the CSS only works when I put it in a style tag inside the <head> of the HTML. If I put the CSS in a separate file it doesn't work.
(I did link the CSS to the HTML correctly)
P.S refer to the tutorial I linked above, it'll get you an idea.
UPDATE:
I made some changes to the HTML and now I have text over the image. And the text isn't moving anymore but adds a white space on top. I tried margin but it didn't remove the white space. I still can't add anything below the image.
HTML-
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
<div class="main"> <h1> SOME TEXT </h1></div>
</body>
CSS -
#main{
position: relative;
}
Did you see the demo? http://www.thepetedesign.com/demos/interactive_bg_demo.html
wrapper div will take all the space available, width 100% and height 100%.
wrapper div holds all the content, position absolute.
ibg-bg div is just holds the background image and its not intended to have content inside, position absolute makes easy to put content over it; no need for z-index.
Any other div inside wrapper div and after ibg-bg div will show on top.
How do you put text over the background?
As I said before, put that content inside the wrapper div and after the ib-bg div.
How do you put text or more content after that div?
Add your new content below wrapper div and start playing with css properties to adapt the demo to your preferences.
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
<!-- You need this next div -->
<div class="ibg-bg"></div>
<div>This will appear over your background</div>
</div>
<div>This will appear below your background</div>
</body>
[Edit]
CSS Copied from demo.
#main {
position:relative;
float:left;
width:100%;
margin:0 auto;
}
[/edit]
After pondering around for a while it turned out to be a JS error. I had done a mistake in javascript while copying the script for the plugin execution.
Shout-out to #Triby for helping me out with the CSS, though that is a different thing and I will state it in another question.
Here's the working JS -
$(document).ready(function(){
$(".bg").interactive_bg({
scale: 1.05,
strength: 25,
animationSpeed: "150ms"
})
})
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})

Unable to style specific view in Angular

I'm having a lot of trouble figuring out how to get one of my views in Angular to display with a specific background. I'm finding that, with the code below, the entire view that I'm trying to style disappears.
All relevant code is below:
HTML (index.html):
<div class="col-md-8 col-md-offset-2">
<div ng-view></div>
</div>
Angular view:
<div class="main-body">
<div ng-switch="xxCtrl.xxx">
</div>
</div>
CSS:
body {
margin-top: 50px;
background: url('../img/main-bg.jpeg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
text-align: center;
font-size: 16px;
height:100%;
width: 100%;
margin: 0;
padding: 0;
}
.main-body {
background-color: rgba(16, 16, 16, 0.6);
height: 100%;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow: scroll; overflow-x:hidden;
z-index: -1000000;
}
I have tried moving the main-body class into the ng-switch, in the ng-switch itself, etc. I even tried setting in-line CSS using ng-style, but I couldn't get the height set to 100%, regardless of how I formatted it. The only time I've been able to get the background to display as I wished was when I set the wrapper div outside of ng-view in index.html to main-body. However, I really don't want the background I'm creating to display across all views - just the one.
I have a feeling this is likely a CSS-related issue, not an Angular one. If anyone can point me in the right direction here, it would be greatly appreciated! Thank you!
Was able to solve this problem by changing the height to 100vh instead of 100%.

Creating a parallax-like effect using an image that isn't the background

I'm trying to create a scrolling effect that preferably doesn't use javascript (CSS only) but I understand if it's not possible, just exploring options.
My page looks like this:
When scrolling down I want the background image to have a parallax-like effect, staying static while the body's background and frame move around it.
Here's a sample of code to work with:
http://jsfiddle.net/J8fFa/7/
HTML
<body>
<div class="border-bg">
<div class="image-bg"></div>
</div>
<div class="border-bg">
<div class="spacer">
</div>
</div>
</body>
CSS
body{
background-color:#aaa;
}
.border-bg{
width:80%;
margin:30px auto;
background-color:#fff;
padding:40px;
}
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg');
height:400px;
background-size:cover;
}
.spacer{
height:900px;
}
I can see how this would work if the image was the background for the body, but as this is sitting on top of the body is there any way I can manipulate it to have a similar visual effect?
change your .image-bg class to:
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg') fixed;
height:400px;
background-size:cover;
}
this will prevent the image from scrolling
updated fiddle: http://jsfiddle.net/J8fFa/9/

Categories