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>
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:
<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 was trying, and googling and searching, but can not solve very simple scenarion... I have:
<div class = "BG">
<div class = "image"></div>
</div>
The background should be centered, and image should be centered. On browser resize, both should resize proportionally to each other.
For the BG class, I have this:
background: url("../img/d_background.jpg");
width: 100%;
height: 2160px;
overflow: hidden;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
which makes BG working exactly as I need. But, as for the child image, it always incorrect size and position. Is there any way to make them work in-synch? I tried many different solution, but child image ends up either being cut-off, of being incorrect size.
you can attribute to your image the object-fit: cover; in your css
your image will take the dimension of his parent.
I'd like to have my banner fill up the top of the website completely, how do I do that? There are some gaps as shown in the photo. Here is my css:
<body>
<div id="headerbanner"></div>
<div class="container">
</div>
</body>
body{
background-image: url("../IMAGES/mountain1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#headerbanner{
height: 70px;
background-color:black;
background-attachment: fixed;
background-position: center top;
}
It's hard to pinpoint the exact issue as you haven't provided a great detail of detail, context or code, but I believe issue is that your background image doesn't cover the container.
Try the following CSS rule
background-size: cover;
Your new CSS would be:
#headerbanner {
height: 70px;
background-color:black;
background-attachment: fixed;
background-position: center top;
background-size: cover;
}
This should stretch the background image to fill the container, whilst retaining aspect ratio.
Try to not make the banner a background, that doesnt make sense.
instead use a fixed position and manually set it to 0px top, 0px right.
Consult this :
https://www.w3schools.com/cssref/pr_class_position.asp
NEXT THING TO CONSIDER:
Once you or your client has accessed the website, programmatically set the position, width and height depending on viewport of the client's browser. This can be accomplished with javascript, using the window.onload function.
So I am creating a website for practice and I want an image to span across the website and be 400px high. But it turns out that the image is replicating it self into the two of the same images in order to expand across the webpage the height is fine.
1) Why is the happening.
2)How do I fix this below you will find my code.
.image {
background-image:url("sauce.png");
height: 400px;
width: 100%;
position: center;}
<div class="image"></div>
The dimension and position properties of the container are not related to background image. Try the following instead:
background-position: center;
background-repeat: no-repeat;
Also, if you want the background-image to fill the entire area, you can use
background-size: cover; which will crop and fill the container maintaining the aspect ratio, or background-size: contain; which will squeeze the entire image in the container, distorting the aspect ratio.
This is because of the CSS background-repeat property which by default is set to repeat.
In your CSS for .image, add the following line: background-repeat: no-repeat;.
background-position: center;
background-repeat: no-repeat;