CSS image does not fit screen
I'm in trouble here. I got a background image with a resolution of 1024x960 and I want it to fit all types of resolutions, but impressively, it stretches a lot on all screens.
This is my CSS:
body {
background-image: url("../testes/jogo.bmp");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
I guess there must be a bug with the code, but still every time I read it, I feel okay, but obviously it isn't.
source to share
Frorm docs :
Cover: Scale the background image as much as possible so that the background area is completely covered by the background image. Some parts of the background image may not appear in the background positioning area
If you want the image to be fully rendered you can use
background-size:contain;
Contain: scale the image to its largest size so that its width and height can fit within the content area
source to share
When you display a 1024x960px image background-size: cover
on a 1366x768px screen, the browser will stretch the image to 1366x1280px. Top and bottom (1280 - 768) / 2 = 256 pixels will be cropped. This is expected behavior.
If you want to fit the image into the body , ignoring the aspect ratio , either:
Specify a percentage length in the background size
This makes the background wider / larger than the container.
html {
height: 100%;
}
body {
background-image: url("http://lorempixel.com/1200/900/nature/5/");
background-size: 100% 100%;
}
Or specify the percentage of the viewport in the background size
This makes the background wider / taller than the viewport.
body {
background-image: url("http://lorempixel.com/1200/900/nature/5/");
background-size: 100vw 100vh;
}
source to share
Try this code:
body {
background-image: url("http://miriadna.com/desctopwalls/images/max/Natural-dam.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
source to share