Hey so I have a bunch of stock images that I am loading as the background image for the homepage of my website.
The problem is that few of them have resolution around 1024 x 768 and few have very high resolution like 1920 x 1024.
Now how do I shrink or stretch my wall papers according to the resolution of my user's screen?
I tried using background-image: cover but incase I load a high resolution image on a low resolution screen only a part of the image is visible on the screen. But it works perfectly in the case of low resolution images being loaded onto high resolution screen.
Check out this blog: https://css-tricks.com/perfect-full-page-background-image/ - it should give you all the info you need.
This is the key css:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This should shrink or stretch your image:
body {
background: url(image.jpg) no-repeat center center fixed;
background-size: 100%;
}
Related
Can someone please help me understand why this CSS:
<style type="text/css">
html {
background: url(images/img.diary.1280.jpg) no-repeat center center local;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
font-family: 'alpha geometrique', fantasy, cursive, sans-serif;
background: none;
}...
would make the background image "move up" by ~25% so that only the bottom ~75% of the picture is shown, compared to this alternate "background:" line?
background: url(images/img.diary.1280.jpg) no-repeat center center fixed;
which shows 100% of the picture fitting within the viewport (which is what I desire)?
I have also tried "scroll" but that has the same effect as "local". The reason I don't want to use fixed is that when I scroll the window, the elements (bootstrap 4) scroll but the background image does not making it look like the elements are sliding on top. I prefer the elements & the image scroll together, which is the real objective I'm trying to achieve.
Thanks
It has to do with the background-size: cover and the aspect ratio of the image. Cover will increase the size of the image until it covers both width and height so if the image is portrait and the window is landscape it will increase the size of the image(maintaining aspect) until it is as wide as the window which makes it taller than the window, and since you have it centered vertically the top and bottom will not be visible. Try this:
html {
background: url(images/img.diary.1280.jpg) no-repeat center center local;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
Contain is like best-fit, it will increase (or decrease) the size of the image to the largest size that will fit inside the window.
Kudos Arleigh Hix for pointing me in the right direction.
What I needed is to change background-position: center center to background-position: center top while keeping background-attachment: local. Now I have both the behaviour I want.
The background image gets under the"bookmark bar" of the chrome browser, due to which the top portion of the image is not seen. Is there a way, we can ensure the image fits exactly to the screen of the browser display ?
My CSS code:
body {
background: url("http://localhost/img/BackgroundImage.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Thank you for the suggestion squeamish ossifrage and Vibhor Dube.
I increased the background image size to 1600 X 703. It fits in perfect..
I need help to make my background fit properly.
I want the whole image to show and be stretched if i use full-screen window.
The image is smaller than my monitor, so when I try to stretch it, it only zooms-in.
I'll show you the image.
Image can be seen here:
http://i.imgur.com/DDsTag7.jpg
My code so far (CSS):
body {
background-image:url(Ranger_with_Tusks_of_Killed_Elephant.jpg);
background-size:100%;
background-repeat:no-repeat;
height: 100%;
width: 100%;
}
It completely ruins the background image on my size of screen: 1920x1080
How can I make it show the WHOLE image no matter what size?
Only using CSS preferably.
My code works great AS LONG AS the window size doesn't exceed the width/height of the image. Try my code and see for yourself, it doesn't show the full image. It's like it zooms-in.
just use code below
html{
background: url(Ranger_with_Tusks_of_Killed_Elephant.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%;
}
I think what you are looking for for is background-size: cover;
I am trying to create a full background website. Now i am working with 1920*1080 resolution screen. But i have to fit the background in any resolution. I use the following css
html {
background:#65b5cc url(webbg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
But this is not re-size the background when browser re-size, and one more doubt is i use the background as jpg image size is 1627*768 . is that the right size. I want to show vector type drawings as my background, so want to get maximum quality in less size. Guide me.
Thanks
Use this property "background-size:100%"
Try this:
html, body {
background: url(http://placeskull.com/100/100/) no-repeat center center fixed #65b5cc;
// Make sure your SVG image expands to the whole window/page.
background-size: 100% 100%;
}
If you use an SVG image, its actual dimensions doesn't matter since it's a vector file, so it can scale to any size without loosing quality.
See Example
I have a mobile page with full screen background image.
I have one image for portrait and one for landscape. My mission is to keep image height full screen while cropping the sides to fit screen and keep aspect ratio.
I tried this css tricks post :
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
While working great (as I needed) on portrait, it doesn't meet my needs on landscape:
It keeps the image full screen width and crops it from the top and bottom (My requirement from the designers is keep full screen height and crop the sides).
There are a lot of examples on the internet for keeping image's ratio etc. (for example ), but I could find a solution for my situation...
Thanks!
Yaniv
This managed to work for me, this is based on the image being a large enough size to cover large screen sizes...
html {
background: url(http://lolcat.com/images/lolcats/1338.jpg) no-repeat center center fixed;
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
}
Jsfiddle here