my background image for the body appears cut off initially and appears correctly when refreshed.
body {
background-position: center;
background-image:url(../interface_images/assessment/genericbackgroundx.gif);
background-repeat: no-repeat;
background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size:cover;
background-attachment: scroll;
}
I converted the image to .gif, but that doesn't fix it.
Is there a way to fix this?
change the background-attachment value to fixed.
With "scroll" (default) - The background image will scroll with the
page.
With "fixed" - The background image will not scroll with the
page.
With "local" - The background image will scroll with the
element's contents
You can read a lot more here
I changed the bg image from the body to the first div inside. It worked.
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.
I have this html code to create a background to my div:
<div id="secondBigDiv">test</div>
This is my css code :
#secondBigDiv{
background: url(../images/myposts/background.jpg)no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This code works perfectly as I want but the problem is:
I couldn't fit the height also, when i scroll down I find empty white spaces because my background image didn't fit the height, it fits the width.
Any help?
I would try putting each image property in its own line. background-repeat,background-attachment, etc
May not change anything but seems to work for me.
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 have a webpage with a background image and a form which i have placed at the center of this webpage.
For background size to be working in ie 8 i have used background-size.htc polyfill
My requirement is background image should move with form content flow , that means when error messages appears below each input field the height of the form will increase that should also increase the height of the background image ,it should be relative to the bg image.Currently,its working in all browsers except ie what shoud i do for that?
Another thing in ie10 same bg image distorts? I'm attaching the screen shot of it.
If you want to cover the background image to entire browser window at all times. please try this,
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;
}
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