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..
Related
I am creating a picture gallery using Bootstrap. At full screen, it looks good
At minimum size, it looks good
But while re-sizing, it does this
I would like the first image (the trees) to be as wide as the second image (the lake), and I've tried adjusting width/max-width, but the problem is the image doesn't scale back down when the second image is ready to be in-line with the first image.
Is it possible to have an image be a certain width when it's col-sm-#, and a different width when it sets to col-md-#?
Consider setting both as background image covers on the divs. This will allow you to resize the divs while retaining the proper aspect ratios of the images.
.yourdiv1{
background: url(images/yourimage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.yourdiv2{
background: url(images/yourotherimage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
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've noticed a bug on a site I am building. When you zoom in on a mobile phone, then rotate the screen orientation and then zoom out the background shrinks and only returns to the original size when the screen is rotated again. Any idea where I am going wrong?
Here is the CSS I am using:
html {
background: url(images/scroll.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
}
Cheers
Simply removing fixed prior to using cover resolved this problem.
background: url(images/scroll.jpg) no-repeat center center;
Right now when you go to this link:http://rawgallery.us/user/login
the background is cut off. It should look like this picture no matter the resolution of the browser window: http://rawgallery.us/CarlisleBackDropWallRoom.png
I am still learning CSS, so I used this code that was suppose to cover the background everywhere, which works :
html {
background: url("CarlisleBackDropWallRoom.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
my #page is setup like this:
#page {
margin-left: auto;
margin-right: auto;
min-height:960px;
min-width:960px;
max-height:1200px;
max-width:1200px;
}
Does the html tag override the page tag?
Can someone tell me how I can view the whole background image if the browser window is 500x700 or 1200x1500 for example?
Thanks!
You may prefer background-size:contain, which fits the background image into its container rather than attempting to cover both width and height of the container.
From the MDN docs:
["contain"] specifies that the background image should be scaled to be
as large as possible while ensuring both its dimensions are less than
or equal to the corresponding dimensions of the background positioning
area.
Here's the CSS:
html {
background: url("/sites/default/files/imgs/CarlisleBackDropWallRoom.png") no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
Here is a working example.
Please note the browser compatibility of background-size.
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