Scrollbar disappears due to background image - javascript

I'm a new-bee and I am trying to build a web-page which has a background image throughout the application.
Problem is that when I move further in the application after login page and all, there is a page called family details which has a scroll-able content but due to the background image the scroll bar does not appear.
I've tried using image tag instead of using background image but then the content does not appear over the image, it appears below the image.
App.component.html
<div class="background-image">
<router-outlet></router-outlet>
</div>
styles.css
.background-image {
background-image: url('assets/icf.jpg');
background-position: center top;
background-size: 100% auto;
}
With image tag
App.component.html
<img src="assets/icf.jpg" alt="/">
<router-outlet></router-outlet>

You could use your image tag method, and assign a lower z-index to the img tag, than the rest of the content
<img src="assets/icf.jpg" alt="/" style="z-index: 0;">
<div class ="all-your-other-stuff" style="z-index: 1;"></>
.img{
background-image: url("https://dummyimage.com/200x200");
z-index: 0;
height: 200px;
width: 200px;
}
.content{
z-index: 1;
}
<div class="img">
<div class="content">TEXT ABOVE IMAGE</div>

body {
background-image: url('https://dummyimage.com/200x200');
height: 100%;
width: 100%;
}
<html>
<body>
<p>Test data</p>
</body>
</html>
Try adding image on Body tag using background-image and use repeat-x, repeat-y property from css.
Then the image will be at the background always.

Add the image to the index.html, and make sure that the div which houses your angular code has a higher z-index; relevant index.html below:
<div class='bkgClass'>
<div class='insideClass'>
<my-app>loading</my-app>
</div>
</div>
<style>
.bkgClass {
height: 100vh;
width: 100vw;
background: url("https://beta.akberiqbal.com/JumboMobT.JPG");
}
.insideClass {
z-index: 1;
}
</style>
No change to your app.component, or any other components;
you can check a working stackblitz here

Related

jQuery: cannot scale img with .load. It fills the entire page. I want to scale it down to fit

I am successfully loading the id #Meatball from file NASA.html. It is a very large img within NASA.html. I am unable to size down the image to 300x250px. I wanted the loaded element, whether its a video, image, or text, to fit within 300x250.
#contentframe{
position:absolute;
z-index: 2;
width: 350px;
height: 300px;
}
#iframe{
?
}
<div id="contentframe">
<div id="iframe"></div>
</div>
$("#iframe").load("NASA.html #Meatball");
Try this:
$("#iframe").load("NASA.html #Meatball");
#contentframe{
position:absolute;
z-index: 2;
}
#iframe * {
height: 300px;
width: 250px;
}
<div id="contentframe">
<div id="iframe"></div>
</div>
Here is a working example on JSFiddle: https://jsfiddle.net/sfarbota/3mwc8xL7/
in css, set the height and width of that image to 300x250px.

How to make `margin: top;` based on browser height?

The title pretty much says it all. I want the CSS margin: top; on my HTML main_content element to be relative to (a percentage of) the browser window (so that the main_content always stays on the bottom of the browser window. How can I accomplish this?
I've tried this and it doesn't work. (the body {height:100vh} doesn't seem to make body any height as the main_content doesn't stick to the bottom as it should.
body {height:100vh}
#main_content {position:absolute; width:100%; display:block; left:0; bottom:0; text-align:center; padding:20px;}
<div>Extra Infomation </div>
<div id="main_content">
<p>here you can learn about me and my adventures</p>
</div>
(Don't try this right now) If you go to my website, you will see the "learn about me and my adventures" heading, that, along with the "recent activity", and other stuff below that, that is the section I want at the bottom of the browser window, preferably with the "learn about me and my adventures" part just sticking out from the bottom of the page.
Give .main_content a margin-top of 100vh (just beneath the viewport), and then use transformY to pull it back up:
.main_content {
text-align: center;
padding: 20px;
margin-top: 100vh;
transform: translateY(calc(-100% - 20px));
background:lightblue;
}
.below_content{
margin-top:-100px;
}
<div class="wrapper">
<div>Extra Infomation </div>
<div class="main_content">
<p>here you can learn about me and my adventures</p>
</div>
</div>
<div class="below_content">
This is content below the main content
</div>
so put a . before main_content if it is a class and put # if it is an id.
below css code for main_content id should work.
#main_content {
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
}
You can try is here https://jsfiddle.net/xsdr00dn/

Scrollable Stacked Images in HTML

I'm trying to make stacked images in a page but I need the page with the images to scroll so position:fixed; isn't working.
I tried this but it makes the images fixed to the screen not the #content div.
<div id="content"><!--I made this scrollable in css-->
<!--other content here-->
<div id="imageStack">
<img id="map" src="bg.png" style="position:fixed;x:0;y:0" /><!--this line and the next will be added in JS-->
<img id="map" src="top.png" style="position:fixed;x:8;y:6" />
</div>
<!--other content here-->
</div>
Is it possible to make the images stack and **scroll* with out using a canvas?
add the following css
#imageStack {
position: relative;
}
img {
position: absolute;
}
img:nth-child(1) {
top: 0;
left: 0;
}
img:nth-child(2) {
top: 6px;
left: 8px;
}
.... etc
they will display relative to the imageStack element

Overflow hidden property is not working with parallax scrolling

The overflow hidden property is not working as expected when trying it with parallax scrolling.
I am trying to accomplish parallax scrolling with JavaScript everything should work fine but when i try to set the overflow to hidden the image still appearing outside the div
Here is the HTML
<div id="page2">
<p id="bb">The title</p> //Some title
<div id="bg"></div> //Blue box in front of the image(design decision)
<img src="img/Food.jpg" alt="prlx" id="prlx"/> //The image which has the proprety
</div>
Here is my JavaScript eventListener and the function :
window.addEventListener("scroll",func,false);
function func(){
prlx_lyr_1 = document.getElementById("prlx");
prlx_lyr_1.style.top = (window.pageYOffset/4)+"px"
}
And this is my CSS for the image which i am trying to hide the overflowing parts :
#page2 img{
position:relative;
top:-300px;
}
And this is the CSS of the div which contain the image
#page2{
overflow:hidden;
height:250px;
}
There is some extra CSS for the #bg
Update:
here is a
You can notice that the overflow is not hidden the container div is the blue side in the page
Here is a js fiddle
So the issue is position: fixed breaks the element out of the flow of the document and unlike absolute it can't be contained by using relative on a parent. Instead you should set this image as a background set to fixed on a div that is position: absolute:
HTML
<div id="page2">
<p id="bb">The chef</p>
<div id="bg"></div>
<div id="bg-image"></div>
</div>
CSS
#page2{
overflow:hidden;
height:250px;
position: relative;
}
#bg{
background: #33c1c9;
height:250px;
width:100%;
position:relative;
z-index:74897;
opacity:0.4;
}
#bg-image{
background: url("http://im47.gulfup.com/1Y5tcL.jpg") no-repeat fixed;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
FIDDLE

Problem with PNG image on top of an image in CSS?

I am using a jQuery content rotator and I want to place a
PNG image on top of a image and on top of that text.
This is how my rotator looks like in HTML:
<div id="testimonials">
<div class="slides">
<div class = "testimonialContainer">
<div class ="leesmeer"> <img src ="http://site/afbeeldingen/test.jpg" ><div class="caption">LORUM IPSUM DOLOR SIT AMET </div></div>
</div>
<div class = "testimonialContainer">
<p class = "testimonial"> 2 </p>
<div class ="leesmeer"> <img src ="http://site/afbeeldingen/test.jpg" ></div>
</div>
</div>
</div>
Here is the CSS:
.testimonialContainer {height: 123px}
#testimonials{
width: 210px;
height: 125px;
}
.slides div{
width: 210px;
xheight: 25px;
xpadding: 5px;
.slides div.caption{
background-image: url(../images/h_contentrotator_zwart.png);
/*background-color:#000000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;*/
color: #fff;
width: 210px;
height: 41px;
position: relative;
top: -24px;
padding: 2px 20px 2px 10px;
zbehavior: url("iepngfix.htc")
}
The problem is that the PNG image doesn't appear and also the text doesn't appear.
Can someone help me out?
You need to add a dot (.) at last selector:
.slides div.caption{
Right now it's not there, but should be.
If the problem is not solved after adding a dot
then be more specific. Change
.slides div.caption
to this:
#testimonials a div.caption
And remove Z from behaviour.
And even if it is not solved then give me a link of jQuery script homepage.
Make sure that you have the right path to the background image. If the style is in the <head> of the HTML page, then the path will be relative to the HTML page. If the style is within an external stylesheet, then the path will be relative to the file location of the stylesheet.
You also might want to get it working without the Internet Explorer 6 PNG fixes first, and then add the fixes back in after you know the rest of the code is correct.

Categories