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
Related
I have a background image in the following div, but the image gets cut off:
<div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">
Is there a way to show the background image without cutting it off?
You can achieve this with the background-size property, which is now supported by most browsers.
To scale the background image to fit inside the div:
background-size: contain;
To scale the background image to cover the whole div:
background-size: cover;
JSFiddle example or runnable snippet:
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
width: 100px;
height: 200px;
border: 1px solid;
background-size: contain;
}
<div id="imagecontainer"></div>
There also exists a filter for IE 5.5+ support, as well as vendor prefixes for some older browsers.
If what you need is the image to have the same dimensions of the div, I think this is the most elegant solution:
background-size: 100% 100%;
If not, the answer by #grc is the most appropriated one.
Source:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
You can use this attributes:
background-size: contain;
background-repeat: no-repeat;
and you code is then like this:
<div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">
background-position-x: center;
background-position-y: center;
you also use this:
background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;
I don't know your div-values, but let's assume you've got those.
height: auto;
max-width: 600px;
Again, those are just random numbers.
It could quite hard to make the background-image (if you would want to) with a fixed width for the div, so better use max-width. And actually it isn't complicated to fill a div with an background-image, just make sure you style the parent element the right way, so the image has a place it can go into.
Chris
try any of the following,
background-size: contain;
background-size: cover;
background-size: 100%;
.container{
background-size: 100%;
}
The background-size property specifies the size of the background images.
There are different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height).
percentage - Sets the width and height of the background image in percent of the parent element.
cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain - Resize the background image to make sure the image is fully visible
For more: https://www.w3schools.com/cssref/css3_pr_background-size.asp
Alternative:
background-size: auto 100%;
you can also try this, set background size as cover and to get it look nicer also set background position center like so :
background-size: cover;
background-position: center ;
I know there are already a zillion questions and answers concerning CSS background-image, but I cannot find the proper answer, unfortunately; above that, some of the answers are quite old...
My CSS:
#showcase {
min-height: 500px;
background: url('../img/P1220784--grijs-1920.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
color: #a21a21;
background-color: rgba(255, 255, 255, .9);
font-weight: 600;
}
Almost perfect for me, except that, on resizing, the image gets cut off on the sides. The image is a photo of people, so I want all of them shown!
(I should have added that the image I use is 1920 * 798 pixels)
Can this be done?
Thank you,
Ad
Try this
background-size: contain;
You can use background-size: auto 100%;
Hi You can try live all possible properties attributes of "background-size" in browser.
Background-size : 100% -Make Image cover whole div but Image will Stretched.
Background-size : coved - Make Image cover whole div with responsive cutoff functionality.
Background-size: auto/contain - Set Image responsibly according to height width on div but not cover whole.
Actually, I have chosen to follow #Dejan.S' suggestion. The img as an HTML tag, and not use it as background. Makes my life a lot easier!
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>
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 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;