I have a div with background-image set to data:image/jpeg;base64 format:
<div style="background-image: url(data:image/jpeg;base64,/9j/4AAQ...
I would like to show full image respecting aspect ratio, using available space. I would normally use:
width: 90vw;
height: 100vh;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
In this case image is stretched using full div size. Any suggestions?
Update:
Div with data:
http://jsfiddle.net/witepo/bksmhtwc/
Update 2:
expected result: http://1drv.ms/1uTj8Nd
Div: http://codepen.io/anon/pen/LEZPjj
try this
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
Related
I have a css background image that i displayed as cover so that it covers entire screen but it does not show lower part of the image.
used this image: https://pixabay.com/vectors/winter-landscape-houses-background-2840549/
unable to see the lower part of the white houses in the screen.
using chrome browser.
CSS Code:
banner{
width: 100%;
height: 100vh;
background-image: url(./images/winter.png);
background-size: cover;
background-repeat:
position: relative;
text-align: center;
background-attachment: fixed;
}
any help appreciated.
edit:
html code
<div class="banner" >
<div class="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
body{
background-image: url(https://cdn.pixabay.com/photo/2017/10/11/10/05/winter-2840549_960_720.png);
/* Center and scale the image nicely */
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
Try changing background-size: cover; to background-size: contain; and then background-size: 100% 100%; to fit 100% width.
body {
background-image: url(https://cdn.pixabay.com/photo/2017/10/11/10/05/winter-2840549_960_720.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-attachment: fixed;
background-size: 100% 100%;
}
The problem you are having that the height of your image is bigger than the hight of the container (body element) at certain point depeding on the current viewport height, which causes your image to be cropped.
You can try the background-size: contain where the image will scale and try to fit the container keeping the aspect ratio undisturbed. Here you gurantee that your image will not be cropped, but you need to consider changing the image for each device screen size (responsive design image).
There are many ways to solve this issue, but you need to find the one that fits your design, or to find the image that fits your container.
Check this w3schools article about responsive design image
.bg-image {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
Here is the CSS code I use to set background-image for a div. The issue I'm facing is that the image height automatically get cropped on reaching a specific screen width (device size). How can I solve this?
You should use the background-size: contain; instead. But in this case, you will have empty space either from the top and bottom or from left and right, depending on the screen resolution if the image container is responsive and the image aspect ratio.
If you want your background image to take as much as possible of space without been cropped you can use this like Merianos stated :
.bg-image {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center center;
background-size: contain;
}
But if you need to specify the exact width and height you can use the same property with percentage or pixels.
.bg-image {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center center;
background-size: 100px 100px;
}
How do I get an image to fill the full screen (note there is stuff below it - think of it as a header in a page that fills the whole screen) but maintains its aspect ratio, either overspilling on the width or oversplilling on the height.
I thought it would be:
<img class="w3-image" src="./images/img1.jpg" style="min-width:100vw; max-height:100vh; background-position: center; background-repeat: no-repeat;" />
But that does not work. The aspect ratio fails.
Insert it as a background to an element instead, with background-size: cover; and the element with height: 100vh.
Basically you may use
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
min-width: 100vh;
http://codepen.io/powaznypowazny/pen/apeVXg
Hope it helps :)
I would like to keep an image fixed as a background while I scroll a semi-transparent box over it. However when I try an do this on a 4:3 ratio screen the image just cuts in half.
Here is my CSS:
.content {
background-color: black;
background-image:url('http://xurbia.tk/alpha/pictures/Croped%20Xurbiar%20Logo%20Mr.%20Isolation.png');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
Here is an example of what I would like to do:
http://s.codepen.io/shardros/debug/vOVWwp
Any help would be much appreciated.
Set the background on the body tag instead of .content, that will do it.
body {
background-color: black;
background-image:url('http://xurbia.tk/alpha/pictures/Croped%20Xurbiar%20Logo%20Mr.%20Isolation.png');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
Updated Example
This sounds more like a problem with your background-size, not keeping it still.
Try background-size: contain instead of cover.
Differences are here:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I have an 4:3 aspect ratio image to put as a background-image.
My first aim is to have a full height image, resizing accordingly to the height, with variable width (depending on the height). The image should be centered.
For example, if I have a 16:9 viewport it should display the background-image centered with left and right blank spaces.
I tried different method (using as example 4:3 image with 16:9 viewport).
First of all, background-size both with contain and with cover applied to the <body> tag:
with cover it respects the aspect ratio but crop the image at the top and at the bottom
with contain it doesn't cover the whole viewport, but actually only the body
Also using background-size: auto 100%; produce the same effect as contain
This is the CSS code I used:
body#home {
background-image: url(../bg.jpg);
background-size: auto 100%;
-moz-background-size: auto 100%;
-webkit-background-size: auto 100%;
-o-background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}
Thanks to #Pete, with this code it actually works:
html, body {
min-height: 100%;
}
body#home {
background-image: url(../ppersia-home.jpg);
background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
-o-background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
Now I've just to add some other background pattern to avoid monochrome color in the left and right blank spaces
Update your css:
background-position: center center; /* needs horizontal and vertical positions */
background-size: contain; /* use contain so your image fits inside */