I want to use image overlay when a page is scrolled like here (see how raindrops and fish appear and a man disappears when scrolling).
I tried to make it with parallax effect using CSS only, but it's not what I need, because it doesn't work on mobiles like the example above.
I will be thankful if you advise me some javascript hacks with 'onscroll' or something else.
My code
HTML
<body>
<div class="parallax">
<div class="bg_one"></div>
<div class="bg_two"></div>
</div>
</body>
CSS
.parallax [class*="bg_"] {
position: relative;
height: 900px;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.parallax .bg_one {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20пни.png);
}
.parallax .bg_two {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20квартиры.png);
}
It's a very nice idea!
I've tested your code not in a real mobil but on Chrome > inspect >toggle device toolbar (left top). This allows you to test a web page in a mobil like environment. I've made a few changes in your css and it seems to work:
.parallax [class*="bg_"] {
position: relative;
height: 100vh;
background-attachment: fixed;
background-position: top center;
background-size: cover;
}
.parallax .bg_one {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20пни.png);
}
.parallax .bg_two {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20квартиры.png);
}
<div class="parallax">
<div class="bg_one"></div>
<div class="bg_two"></div>
</div>
Related
Need help creating a full page gallery. I tried various options. I'm trying to create full page gallery that lets the user scroll vertically though 1 image at a time.
Here's my code:
<style>
#img1 {
background-image: url("<?php echo $image ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img2 {
background-image: url("<?php echo $image2 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img3 {
background-image: url("<?php echo $image3 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div id="img1"></div>
<div id="img2"></div>
<div id="img2"></div>
I'm stuck on the javascript/jquery solution to detect if the user has scrolled. I want to change images if the user scrolls up 10 pixels or down 10 pixels.
Here's an example of what I'm trying achieve:
http://themes.themegoods.com/photome/demo/gallery-archive/gallery-archive-fullscreen/
It would be better to use js libs like "fullPage.js, smart scroll, pagePiling.js" those help you to make a perfect page or gallery scroll like what you wanted to achieve, for more information follows below links:
https://alvarotrigo.com/fullPage/
http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/
https://alvarotrigo.com/pagePiling/
I have a problem I need to put a background image to the body of my page but that this is responsive and suits any size .. this I should do only with css or also javascript, could give an example please
For the HTML:
<body class="background">
<!-- Content goes here -->
</body>
For the CSS:
.background {
background-image: url(image.png);
background-size: cover;
position: fixed;
}
Tell me how it goes!
For the CSS
.body {
background-image: url('myImg.jpeg');
background-position:center top; // you can change this as you like.
background-repeat:no-repeat;
-moz-background-size:cover;
background-size:cover;
height: 100%;
width:100%;
}
Add -moz-background-size for Firefox Browser.
I'm using bootstrap inside of React to display a grid of images in fixed size boxes. The images are all of different sizes and I don't want to distort them. The behavior I'm looking for is an image displayed in the center of a fixed size box, say 325X250 with a white(or any color) background. I'm really not a CSS person, thus the question.
This is my React code.
return (
<div className="row">
<div className="image-viewer">
{this.state.overlay}
<ul className="list-inline">
{this.state.images.map(function (image) {
return (<li key={image.src}><a href="#" onClick={this.handleClick} data-id={image.mediaId}><div className="img-container "><img
src={image.src}
className="img-responsive"
alt={image.mediaId}/></div></a></li>);
}, this)}
</ul>
</div>
</div>
);
This is the styling I've done till now,
.image-container{
width: 250px;
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.image-container img{
height: auto;
width: 100%;
}
This clearly doesn't work. I've looked into this link,
How can I make all images of different height and width the same via CSS?
But couldn't get any solution to work to my requirement.
Any help appreciated.
As an alternative to the <img> tag, you could use any block level element and CSS background properties:
background-image: url(http://domain.top/path/to/img.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
The property background-size and the value contain will render a background image to stretch to it's containing element's edges as far as it can without distortion and will maintain original aspect ratio.
SNIPPET
.img {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
outline: 1px dashed red;
width: 325px;
height: 250px;
margin: 10px auto;
}
#bbc {
background-image: url(http://i.imgur.com/4TLlrL3.png);
}
#lena {
background-image: url(http://i.imgur.com/o1RbMvI.png);
}
#normal {
background-image: url(http://i.imgur.com/43uy0hP.png);
}
<div id='bbc' class='img'></div>
<figure id='lena' class='img'></figure>
<section id='normal' class='img'></section>
Try adding 100% to both of them:
.image-container img{
height: 100%;
width: 100%;
}
Adding 100% to both of them will have it go full width of parent element
I am unsure of why I cannot get a background-image to appear in the following snippet. The url is correct and I have set size to the image. Also, how can you align a background-image in the center of a page? I know there are properties like right top, but I do not see one for center vertically and horizontally.
Thanks.
$("#arrow-icon").slideToggle(1000);
.arrow {
height: 400px;
width: 100%;
background-color: blue;
text-align: center;
}
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="arrow">
<div id="arrow-icon">
<!-- <img src="http://optimumwebdesigns.com/icons/down-arrow.ico"> -->
</div>
</div>
The problem is that the div is smaller that the picture.
You can get around this with the background-size property
Example:
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
background-size:100% 100%;
}
fiddle - https://fiddle.jshell.net/800modgt/
Or you can change the div width and height to the image width and height...
And in terms of centering, simply use:
background-position: center;
That said, I'm noticing that it's not center on the page on the Fiddle previously posts. You can use
margin:auto;
to center a <div> horizontally
You might consider for the positioning using CSS3 for positioning, as it's very versatile in changing position of a div and how far it slides out. Here is a JSFiddle. It's for side animation, but it will work for just a standard up/down, too.
https://jsbin.com/yovaqo/edit?html,css,js,output
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%;
}