Adapt image to any device - javascript

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.

Related

Image overlay when scrolling (javascript)

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>

JQuery background video does not cover whole the page

I am using Vide to play a video in the background.
Here is the playing div tag.
<div style="width: 1000px; height: 500px;"
data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>
when i change the style to
width: 100%; height: 100%;
The video disappears from the page. I want that video covers all page and I can scroll down.
Why does it happen?
How can I fix it?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Body background example</title>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body data-vide-bg="video/ocean">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../libs/jquery/dist/jquery.min.js"><\/script>')</script>
<script src="../src/jquery.vide.js"></script>
</body>
</html>
This is fine just put scroll bar or use some jquery for scroll purpose.
if you want to cover all with the div and adjusted depending on the size of the screen, this is the code (Important, this is directive to the div):
style="
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
-webkit-background-size: cover;
background-size: cover;
background-image: none;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;"
if you want in the body, in the folder examples/body-bg.html is the examples for apply to the body only: https://github.com/VodkaBears/Vide/tree/master/examples
You are using the wrong units of measurement. If you pull the image in via CSS image-background then you can set the image-background-size to the contain property. It will insure that the video completely fits into it container (body, div, span, etc.).
body{
background-image:url(''your-video.mp4');
background-repeat:no-repeat;
image-background-size: contain;
}
Source: w3schools CSS3 background-size Property
You could also try using the height and width but use the vh and vw metrics. It sets the height and width based on the view ports dimensions.
Source: CSS Units

Issue pre-loading an image from cache in Firefox or Edge

I have a web page which changes the background-image url of an element when it is moused-over (using the :hover css pseudo-class).
.myClass {
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-image: url("a-icon.png");
background-size: 100px;
}
.myClass:hover {
background-image: url("b-icon.png");
}
In order to avoid a flicker while the browser fetches the 'hot' image for the first time, I use the following JavaScript code to pre-load the image:
(new Image()).src = hotImgUrl;
This works with Firefox & Edge if they don't already have a cached version of the image (i.e. on first visit).
But if you reload the page once the browser has cached the image, it no longer works and you get a flicker as you mouse over the image.
Chrome & Safari don't have this issue.
I have created an example below, which shows the issue.
//pre-load hot image:
(new Image()).src = "http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png";
.myClass {
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-image: url('http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-a-icon.png');
background-size: 100px;
}
.myClass:hover {
background-image: url("http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png");
}
<div class="myClass"></div>
Is this a Firefox/Edge bug? Or am I going about this in the wrong way? Any help would be much appreciated!
Try this:
//pre-load hot image:
(new Image()).src = "http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png";
.myClass {
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-image: url('http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-a-icon.png');
background-size: 100px;
}
.myClass:hover:after {
content: '';
display:block;
width: 100px;
height:100px;
background-size: 100px;
background-image: url("http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png");
}
<div class="myClass"></div>
Not really sure that it will help, but at least try.
You can unify 2 pics as 1 pic and can change just background-position. So pic loads when page is opened.
div{
background:url("http://www.csstr.com/3.png");
width:100px;
height:95px;
background-position:0 center;
}
div:hover{
background-position:100px center;
}
<div></div>
So what about this one? 2 pics are loaded when page is opened, we need to just set z-indexes.
div {
position:relative;
}
img {
position:absolute;
left:0;
top:0;
}
#pic1{
z-index:50;
}
#pic2{
z-index:40;
}
div:hover #pic2{
z-index:55;
}
<div>
<img src="http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-a-icon.png" id="pic1"/>
<img src="http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png" id="pic2"/>
</div>

CSS Transition background image to fade in but not animate size

I want to make an image slideshow.
I am using CSS to make it transition smoothly between one image to the other, but this animates not only the fade-in transition but also the image size..
My current CSS:
.slideshow{
width:100%;
height:100%;
background-size:cover;
background-repeat: no-repeat;
background-position: center;
transition: background-image 5s;
overflow:hidden;
}
This fiddle shows exactly the problem: https://jsfiddle.net/raphadko/gchey1tL/
My question is.. is there a way to transition only the image fadeing, not the resizing?
You can get rid of the CSS transition property and do this with jQuery using the fadeOut() function:
$('#changeSlide').on('click', function() {
$('.slideshow').fadeOut('500', function() {
$(this).css('background-image', "url('http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-210147.jpg')").fadeIn('500');
});
})
.slideshow {
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
background-image: url('https://s-media-cache-ak0.pinimg.com/236x/8c/e5/7a/8ce57a18e94e9f5fdc29865c7d927d6c.jpg');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="overflow:hidden; width:300px; height:300px">
<div class="slideshow"></div>
</div>
<button id='changeSlide'>Change Slide</button>
It not only fades but it resizes too.. I want it to fade to the image already sized up to fit the slideshow div
jsFiddle Demo

How can I stretch content background image to full screen?

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%;
}

Categories