I am using the following code to set a background image to my HTML:
body {
margin: 0;
background: url('images/lightning.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
But the image did not show up entirely on the screen so I tried the following solution:
https://jsfiddle.net/507w9yoa/ which doesn't work as well.
Could someone please help me set the background image without adding the scroll bar or cutting off the images? I have tried all solutions available here and other site but nothing seems to work.
contain
contain will maintain the aspect ratio and fit the screen either vertically or horizontally. It will not crop the image but therefor not fill the entire background unless the aspect ratio is the exact same.
body {
margin: 0;
background: url('https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg') no-repeat center center fixed;
background-size: contain;
}
Try this out: I just used 2 different units in background-size and now image works as for the screen size, image doesn't gets cropped and fills screen. I tried different screen and it worked fine for me.
body {
background: url('https://i.postimg.cc/1tcWpbZY/pexels-plato-terentev-5822191.jpg');
background-repeat: no-repeat;
background-size: 100% 100vh;
}
Try below
body {
background: url("https://upload.wikimedia.org/wikipedia/commons/d/dc/Standard_time_zones_of_the_world_%282012%29_-_Pacific_Centered.svg") no-repeat;
background-size: 100vw 100vh;
}
This might stretch weird but won't add any scroll bar and won't cut your image.
Related
I am trying to make a background image of the particles JS responsible. Thus I used this code:
#particles-js {
margin: 0;
padding: 0;
width:100% ;
height: 100%;
background-image: image-url("rub.jpg");
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
but when I resize my browser I get this result:
Which in my opinion is too small in height. I used the image background-size: cover because it is what is recommended to make the background image responsive but it does not fit well.
My question is if it depends on the original size of the image or I am doing something wrong? and if there is any specific way to make the background really responsive? In other words to make the image background fit the maximum height and width of the screen of the the different mobile devices?
See if this helps: http://codepen.io/panchroma/pen/ggMYBQ
The key detail is to apply the background image to an element that covers the full height of the screen, eg html
CSS
html{
background:url(https://images.unsplash.com/photo-1440804518589-c0bbe09a8103) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I had to set 4 pages with 100% width and height background depending of the screen size.
The imgs have got the same width and height and these are my settings,
.fullImg{
width: 100%;
height: auto;
max-height: 100vh;
max-width: 100vw;
}
this is working perfectly for few pictures but not with others, how is that possible if the pictures got the same dimensions?
I tried to do background-size: cover which is working for a while but then it will cut off the img so the best way so far is that one i wrote above.
I am talking about big screen sizes from 1440px to 2560px.
Thanks a lot
You can have a look at the headers here: http://provaresponsive.herokuapp.com/pr.html
As mentioned in the comments if you want an image to always use all available height and width, then you have to decide: Do you want the image to retain it's aspect ratio - then it has to be cropped, or do you want the image to change aspect ratio, in which case it will stretch.
Here is an example for each option:
No Stretching - Will Crop
html {
background: url(http://www.olejarz.com/arted/perspective/images/intro.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
jsfiddle
Stretching - No Cropping
div {
background-image:url(http://www.olejarz.com/arted/perspective/images/intro.gif);
/*
* Width & Height can be percetages only when the parent
* element has explicitly declared dimensions.
*/
height:200px;
width:500px;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
}
jsfiddle
And there is a third option, you probably won't like, which is to contain the image, so:
No Stretching, No Cropping - not filling the x/y
html {
background: url(http://www.olejarz.com/arted/perspective/images/intro.gif) no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
jsfiddle
use backstretch js .it can fix your issue.if you call your background image using backstretch js then it will automatically adjust your image according to your screen ,whatever your image resolution is
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.
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'm not a seasoned web developer and am quickly hacking up something for fun. I have a web page that has an 1024 x 768 background image (I know that's probably a bad idea) that I can correctly centre if the browser width increases. However, when the browser width decreases below 768px, I want the image to be "centered" along with the width rather than just tacking the top left corner so that the centre of the image is always in line with the other elements on the page.
What kind of CSS magic can pull this off?
Here's my CSS:
body
{
background: #000000; /*Black bg for extra space not covered by img*/
font-family: sans-serif;
margin: 0px;
}
.wrap
{
background: url(../images/background.jpg) no-repeat;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: auto;
/*Stretch body all the way to edges*/
/*width: 1024px; /*Min width for site*/
}
Thanks.
follow tutorials for responsive :
http://stephen.io/mediaqueries/
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
Take a look at this website
The CSS shown here in the "Awesome, Easy, Progressive CSS3 Way" is almost as the code you have. what you need to change to center the image horizontal and vertical is adding "center center" to the background settings:
.wrap{
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: auto;
}
Have you tried :
background-size: 100% 100%;
along with all your other css. This will ensure that the background image that you are using will stretch to fit the screen size(height and width-wise)