So i'm having the trouble that if I have a "long" webpage (where you make your window as big as you can but still need to scroll) the image doesn't "behave" correctly.
I thought that setting the background-size property to cover would do this but is the image isn't big enough (Which would have to be pretty big) I just get white space once I scroll down the page a little bit. Is there a property that would, say, set the height of the background to 100% then properly scale the image so it has the correct width proportional to the original height?
My solution as of now is having a background color that the image "eases" into, just to make it look smooth.
Try to use
html,body {
background: url(yourImg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Or if image isn't big enough, use a background color as well`
background: #6DB3F2 url('yourImg.jpg');
Try using background-size: 100% 100%; property.
But that will stretch your image.
If you want to add background to the full webpage then you can add background-image:(''); property to body.
e.g.
body{
background-image:url('http://backgrounds-free.com/highresolution/l_086.png');
background-repeat:none;
background-size: 100% 100%;
}
Related
I have fullscreen website with background-image: no-repeat and background-size: cover style on it. I want to make animation that the background image will resize in 10 second to the right side of the page to 350px width and 175px height. It's even possible to do it?
body {
background-image: url(/image.png);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
}
I saw some webkit animation but there was problem with the background-size: cover style, so the animation doesn't work.
I tried :
$(function(){
$('body').one("mouseover", function() {
$('body').addClass('hover');
});
});
But it will resize the image instantly and move it to the right, I want to resize them linear.
Thank you very much guys! :-)
You could add something like this to your css:
body {
background-position: center center;
transition: background-size 10s ease-in-out, background-position 10s ease-in-out;
}
body.hover {
background-size: 350px 170px;
background-position: right center;
}
https://codepen.io/anon/pen/oPbqPm
The problem with this, is however, that it won't animate the sizing.
I would suggest you don't set the image as background. Instead, position the image behind all other elements using position and z-index properties. Once set, you can add the animation. For more details on using z-index and position attributes see the link below and "try it yourself" example:-
https://www.w3schools.com/cssref/pr_pos_z-index.aspenter link description here
You can then use css animation for resizing of the imgae.
TO learn how to add animation see this link:-
https://www.w3schools.com/css/css3_animations.asp
How do I achieve this scrolling effect in Boostrap? Have a fixed image background with the content div overlayed on top when scrolling:
http://www.standardhotels.com/culture/things-to-do-july-2017-new-york-los-angeles-miami
There are several ways you could achieve this. You could fix a background image to html and offset the body, adding padding to keep text in the viewport. For example:
html {
background: url(DESIRED BACKGROUND IMAGE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background:lightblue;
padding-left:150px;
padding-right: 30px;
position:relative;
left:-150px;
top:80%;
}
Check out this basic (but very cute) kitten example.
EDIT
Looking further into your example's code, you could also add margin-top to the body and remove the positioning top. Your example shows margin-top: calc(100vh - 140px) !important;
Here's an updated version of my fiddle with the properties swapped. You can see that the effect is very similar.
You are looking for Parallax scrolling. Here is the link with working demo on how to achieve this.
I'm trying to setup a div with a background image with some text on top of it. The background image needs to stretch the entire width of the viewport, which I've been able to do successfully. This is my CSS:
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background: url(http://) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The problem I'm having is that it isn't showing the full height of the image. The image is being cropped at the top and bottom. I want the image to show it's full height and the user needs to be able to scroll down to see more content below the image.
Is there a way I can show the full image without cutting the top and bottom off?
Thanks!
Remove the fixed and instead of cover use contain. If you want a specific size though I would define a height in my css.
You can use background-size: auto 100%;
I updated an example in fiddle to see how its looks.
http://jsfiddle.net/4ozmn00t/2/
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background: url(http://);
background-size: 100% 100%;
}
setting the width and height of background-size to 100% will fill the div
Remove the fixed from the background.
url() no-repeat center center
Please guide me how to set background image of the web page to full screen.
Also I'd like to this image to show fullscreen for all size monitors and mobile devices..
Right now I have an image with resolution 1920 : 1080 and it only looks good on my 19" monitor with resolution 1440 : 900, but not good on 15.4" laptops and mobile devices.
Please help,
Thanks.
The proper solution to keep the ratio to your image is to set background-size: cover.
If the background-size: cover; doesn't work for you, for example, if the aspect ratio of the image is wrong, then you can try using background-size: auto 100% to ensure that the picture keeps it's aspect ratio as well as being tall enough to fit the screen.
I think it all depends on the resolution of the image and the maximum size you're willing to have it. But you will need to put media queries into your code to ensure there are no gaps when the screen gets too big or too small.
Use background-size:cover; will help you.
Use background-size: cover; for newer browsers:
<div id="bg"></div>
html,body{
height: 100%;
}
#bg{
width: 100%;
height: 100%;
background: url(image-path.jpg) no-repeat;
background-size: cover; /* also include vendor prefixes: you may google */
}
check compatibility using background-size
Better solution for full background image with responsive can be found here
You can tackle this in two ways:
New browsers, Use the CSS:
background-size: cover
Old Browsers, use a fake <img /> for the background.
.bg {z-index: 1; position: absolute; width: 100%; height: 100%;}
The background image property for chrome, mozile and opera browsers
body {
background: url(images/image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
i have got a little problem with css on my homepage:
if i visit my page from a android device, and i scroll down,
the background image gets a little bit bigger, and if i
scroll up, it resizes again to the correct size.
I think the problem is: i load the pages with jquery's load()
into a div. Then the page size changes, but css still uses the
old size (at dynamic values (100% and cover).)
css:
body {
background: #000000 url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
max-height: 100%;
max-width: 100%;
overflow-y: scroll;
}
If you don't know what i mean: https://www.youtube.com/watch?v=I_ukAfoiqBo look at the background image
What i tried: i have no idea why this is happening (only on android devices) so till now i tried nothing :/
Xorg