I'm trying to set multiple background images on my body.
In order to do so, I made this which works, but isn't really doing what I want.
body { background-image: url('https://picsum.photos/100/100'),url('https://picsum.photos/100/100'),url('https://picsum.photos/100/100');
background-repeat: no-repeat,no-repeat,no-repeat;
background-position: center,right top,left top;
background-size: 80%,110px,110px;}
As you will see, there are three images, one to the center, and two others on the sides.
In fact I would like to have the center image with the property repeat in order to really cover the entire body. But If I do that, the two others backgrounds seems to be hidden by the center one. I would like to have the two others backgrounds coming in front of the first center background.
I want also the sides background to be sticky, but this is the next step.
Try this :
body {
margin: 0;
background-image: url('https://picsum.photos/100/100');
background-repeat: no-repeat;
background-position: center,right top,left top;
background-size: 100%;
}
body:before{
content: "";
background-image: url(https://picsum.photos/100/100);
background-size: cover;
width: 200px;
height: 100vh;
float: left;
}
body:after{
content: "";
background-image: url(https://picsum.photos/100/100);
background-size: cover;
width: 200px;
height: 100vh;
float: right;
}
Related
I'm not sure why but any image I choose for the page's background is never 100% entirely shown. I'm not sure if create-react-app has something to do with it or what but there is always some part of the image that is overflowing and gets cut from the page.
body{
background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
background-size: 100%;
background-position: center;
height: 100vh;
}
I need the image to be shown in its entirety. background-size: 100% doesn't seem to do it inside create-react-app for some reason.
Basically, background-size: 100% will fill the screen with the image, and crop it if necessary.
I think what you want is to see the whole image. You should use contain for that:
html {
width: 100%;
height: 100%;
background: red url('http://media.gettyimages.com/photos/groningen-city-view- picture-id588880579?s=612x612') no-repeat center;
background-size:contain;
}
jsfiddle
This can be done purly with CSS, look for some basic CSS background properties
body{
background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
background-size: cover; //contains these values - auto|length|cover|contain|initial|inherit;
background-position: center;
background-repeat: no-repeat; //contains these values - repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
height: 100vh;
background-attachment: fixed; //contains these values - scroll|fixed|local|initial|inherit;
}
Note: Look for background-attachment property, if you don't need it you can remove it.
Try this:
body {
background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
overflow: hidden;
width: 100%;
}
Currently, I create a 1288x200 image (https://jstock.org/images/banner.png).
I want it to shown as 100px height banner. The reason I'm using 2x height, as I want it to look good in retina display.
As you can see in current outcome, it doesn't look good - https://jstock.org/
I try to change from
.banner {
height: 100px;
background: #3B3E44 url('images/banner.png');
}
to
.banner {
height: 100px;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background: #3B3E44 url('images/banner.png');
}
But, the outcome is still the same.
Can anyone provide me some hint, on how to scale down the background image proportionally?
you set your background-size to contain so it contain your image in your height
.banner {
height: 100px;
background: #3B3E44 url("https://jstock.org/images/banner.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
<div class="banner"></div>
It seems that background-position/background-cover is not working with data URI as background images? What I have is a preview of images to be uploaded. To show those previews I am using JS to get the data URI into CSS background images, which I hope to center.
But I notice the following code does not work with a data URI
div {
width: 200px;
height: 200px;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRg...);
}
https://jsfiddle.net/7pfc2vLx/
UPDATE
I notice like many mentioned I am missing background-position in my above example. But seems like even with that it does not work when its an inline style?
<div id="profile-avatar" style="width: 200px; height: 200px; background-position: center center; background-size: cover; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAA
https://jsfiddle.net/7pfc2vLx/4/
If you want to Center an image then try JSfiddle
div {
width: 100%;
height: 200px;
display: block;
background-size: contain;
background-repeat: no-repeat;
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/4QBsRXhpZgAASUkqAAgAAAAD…y5eKCQaVqJ0y7W7JJJ2b6cxwd3MlGwz9mN4vrwL6sTjY+BzMiXWzjSpa2fJRFOu/auHjYv/9k=);
background-position: center center;
}
Maybe I'm missing something in your question, but shouldn't you just add the position?
background-position: center;
Your background already fit the div and if you want to make sure it's in the centre of the div, add:
background-position:center center;
But seem nothing change, because your div is not center itself, so add:
margin:0 auto;
Now they all in center posistion. https://jsfiddle.net/7pfc2vLx/2/
I'm not sure what to do. I want to use one image with two different pictures on it for the image swap (on hover) so there won't be a delay due to a new picture having to be loaded.
But, I'm using background-size: contain because there's a lot of changes in the scale of the image depending on a bunch of different factors. Is there a way to make it work? It's just not working for me at all. It tries to fit the entire img into the space instead of just the half that's supposed to go there.
Here's the css:
.newbutton a:hover , .newbutton a:active{
background-image: url(images/new-post-button.png);
display: block;
background-color: #9bb6c3;
background-position: 0 100%;
}
.newbutton a {
background-color: #c0d6e4;
background-image: url(images/new-post-button.png);
background-position: 0 0;
display: block;
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
I have applied set background-image on one of my <div> with the following properties below:
.mydiv-left {
background: url(path to image) no-repeat center center fixed;
height:auto; // also tried with 100%
background-size:auto // also tried with "100%" and "100% 100%" as well as "cover"
}
This result is no image display, but when I set the height to this image, it cuts off the image. As image is of high resolution and I want it to fit in the smaller area of my div without removing any part/information.
Keep in mind that background image is dynamic and keep on changing for other divs within the loop.
Try this
CSS
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}
If you post the entire code it is easy to find solution.
<div> without content/ height will result in 0 height. I guess that's why you can't see your image.
Give your <div> a size, and background-size should do its work.
http://jsfiddle.net/LsdDE/
.d1, .d2 {
border: 1px solid grey;
width: 200px;
height: 200px;
background: url(https://www.google.com.tw/images/srpr/logo11w.png);
}
.d1 {
background-size: auto 200px;
}
.d2 {
background-size: 200px auto;
}
Simplest suggestion would be to give min-height to your div in pixels... DEMO , keeping your markup same, below is the CSS.
CSS
.mydiv-left {
background: url(http://www.wallng.com/images/2013/08/image-explosion-colors-background-beautiful-263613.jpg) no-repeat center center fixed;
color : #FFF;
min-height:200px; /*this is the key*/
height:auto;
background-size: 100% 100%;
background-repeat: no-repeat;
}
if you give height:auto;, it would scale the div to content height.
if you want to show the div anyway, min-height is a solution
Thanks all for helping me out, I was able to get it done with the following below code:
mydiv {
background: url(images/bg.jpg) no-repeat;
height: 150px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Main thing was last four lines that worked for me the way I wanted.
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}