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.
Related
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.
I have a background image on my front page which is supposed to cover the entire screen.
It's a fairly large image, 2560x1714
However, most screen resolutions won't match that. And when the aspect ratio is at it's max. It starts "zooming" in on the picture, to fill it to the width of the screen. However, when it does this, it zooms in on the top of the picture.
I need it to zoom in on the bottom, as that's where I want the focus to be.
Here's an image of what I want to see: (the beach basically)
However, when I make my browser wider, it "zooms" in on the top of the image.
It's completely fine that it changes how much I can see of the image. But I need it to be opposite of what it does now. So the beach is always at the bottom of the screen no matter what.
Here's the CSS for my header:
header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #FAFAFA;
background-image: url("../img/header-2.jpg");
background-position: top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover
}
Any ideas on how I can make it, so I see less of the sky, instead of less of the beach/surfboard?
Thanks for your help!
background-position: top;
to
background-position: bottom;
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;
Is there a way to make the background image move when you scroll the page up and down, whenever i scroll up and down the background image stays still but I want it to move with the page, is that possible?
Simply set the attachment to fixed.
background-attachment:fixed;
If you have a large image, you can use background-size.
For example:
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;
}-
background-size does what it tells you. Using cover as the attribute, the background image is scaled to fill the entire background, thus getting rid of the scrollbars when using an image larger than your screen.
background-attachment?
Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
I have this image "ignore the red line on top of the image"
And i want this image to be the background of my html page it starts with white and ends with blue, all what I want is: using css to stretch this image in the background based on the page height, for example in some pages the page height become 2000px with scroll in the browser, and some pages height 1000px, i need all pages to use the same background image and just stretch it using css.
I want this to run on all browsers including IE 7,8,9
what I tried to do is:
div.fullscreen
{
display: block; /*set the div in the top-left corner of the screen*/
/*set the div in the top-left corner of the screen*/
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-image: url("../images/landingpage_bg.png");
background-repeat: repeat-x;
}
but it didn't stretch well.
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;
background-repeat: repeat-x;
}
hope this helps
the only 1 way, is to crop your pic, put it to background bottom with repeat-x and use border-top on body\html, or whatever you'll use for your pic