I am trying to figure out how to stretch a background image vertically. I am using CSS3 with 3 images in the following way:
background-image: url("left.png"), url("right.png"), url("center.png")
background-repeat: no-repeat, no-repeat, repeat-x
background-position: top left, top right, top
Now I want to stretch these images vertically to that they extend all the way to the bottom. Is there a way to do this?
I'm late to the party here, but this is what worked for me:
background-size: auto 100%;
This will fit the image vertically and let the width do whatever it needs to do (i think it repeats by default). You can also set:
background-repeat: no-repeat;
for it to not repeat the image in the horizontal direction.
Try:
background-size: 100% 100%;
first 100% is for the width and the second for the height. In your case you need the second set to 100%
Thank you for bringing up this question. Below is what worked for me
background-size: cover;
background-color: #a8dadc;
background-repeat: no-repeat;
background-size: 100vw 100vh;
Related
according to the window size, the picture should both cover the window and even if the window height is greater than the height of the picture, let the picture be centered and fully covered.
But I don't want like this (Because the image is not centered, it just starts from the corner.):
background-size: center cover;
Your attempt looks like you try to do it with a OneLiner.
body {
background: url(https://via.placeholder.com/500/green) transparent no-repeat center center / cover;
height: 100vh;
}
<body>
<div>
hello World
</div>
</body>
background-size sets the size of background images for the element. The size of the image can be constrained, completely or partially in order to maintain its aspect ratio.
then remove the margin and padding from the element's parent
try to separate each term, like this
background-size: cover;
background-position: center;
try using margins
I have defined a css for you
.image{
width: 40%;
height: 40vh;
margin-top:30vh;
margin-left: 30%;
}
u can change the width and height of image but remember change margin top and margin left by half.
I used this for a div with an image inside of it. should work just fine. it will get smaller/larger depending on the window size and it will be in the exact center of the page.
background-image: url(path/to/image);
background-size: cover;
background-position: center center;
I have a background image in the following div, but the image gets cut off
Is there a way to show the background image without cutting it off?
This is actually a pretty easy fix. Most of it comes down to using percents to specify the size of the image rather than pixels.
div {
background: url(img.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
You could use the background-size: cover; property to get the image centered, though what you are trying to achieve will be always impossible except in case the dimensions of the background image matches perfectly the dimensions of the container div; otherwise, it will always result in a distorted image. I guess background-size: cover; is the most approximate.
.contain_img {
width: 300px;
height: 200px;
background-image: url(https://unsplash.it/200/300?image=1082);
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
}
<div class="contain_img"></div>
Can someone please let me know what the 20% does in the following style?!
background: url('header.jpg') no-repeat 20%;
padding:500px 0;
background-size: cover;
background-attachment: fixed;
Thanks.
it should be position of background image:
background: color image position/size repeat origin clip attachment initial|inherit;
http://www.w3schools.com/cssref/css3_pr_background.asp
It sets the background-position-x property of the background image 20%, which moves the image to the right by 20%. Although using it with background-size: cover and background-attachment: fixed doesn't make a lot of sense.
See https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
I would like to use 2 images as a fixed image's background image so I used the code on the body.
background: url(images/31.jpg) 100% no-repeat, url(images/12.jpg) 100% no-repeat;
background-position: fixed;
I need them to fit the browser width 100% and I want image 2 to stack vertically after image 1. I have read quite a few websites about using multiple images with CSS3. Is this possible without JavaScript and if so why do my images stack on top of one another and image 1 doesn't start at top left?
the following reference css try it
#idName {
background-image: url(image1.png),url(image2.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
You need to set the vertical size to 50% or so, else every images takes all the height
body {
background-image: url(http://placekitten.com/300/150), url(http://placekitten.com/200/120);
background-size: auto 50%;
background-repeat: no-repeat;
background-position: top center, bottom center;
}
fiddle
I want to give my body a background that is fixed in the middle.
So that when I shrink my window it won't start cutting the right-side and keeping the left side static. I want it to cut left and right at the same time.
I want it to be like this example: www.everythingisnew.pt
In that website you can clearly see that the background gets "eaten" by the window at the same time from both sides.
What is the css behind it?
Specify background-position: center in your body element's CSS:
body {
background: url('your/background/src.png') no-repeat fixed center
}
This may solve your problem
background-image: url(src.jpg);
background-repeat: no-repeat;
background-position: fixed center;
background-size: cover;