When I place a background image in my div to create a background for it a scrollbar horizontally for the whole webpage. I think it is because my background-size: cover; made the background image grow to its original size but I want the image to scale down exactly to fit all devices.
Codepen: https://codepen.io/Javscript/pen/WNXmRMp?editors=1100
The scrollbar has nothing to do with the background image, not even with the element which has the background image. (Btw., a background image can never affect box sizing.)
The .main-con element has a width of 100% and a margin of 160px. The 100% does not refer to the remaining space; it refers to the width of the parent element, in this case the body.
So the .main-con element is as big as the body/screen, but has a 160px distance from the left side, resulting in it overflowing 160px on the right side.
One way to counteract this without completly reimplementing your website would be to set the width of the .main-con element to calc(100% - 160px).
Try to use this property:
background-size: contain;
background-repeat: no-repeat;;
The difference between the values cover and contain is that:
1- cover: makes the background covers the whole div
2- size: makes the background fits inside the div
You gave your background Image a size of 100%. But you have allso ur Sidebar. So the Image itself cant take all 100% of the screen. Try using
calc(100% - 160px)
for the with of the .main-con
Related
I have a background image that is taller than my page, but I set it as the background for my wrapper. This has been pretty problematic for me, however. When I try to resize the window, there is a large amount of white space under the background image. This is because I have a set height for my wrapper,
.wrapper{
top: 65px;
background-image: url(img/iasite.png);
background-repeat:no-repeat;
background-size: 100%;
width:100%;
height:7250px;
}
If I try changing the height to 100%, there is no background image at all and the page is blank(there is no other content in my wrapper at this point). If I do not set a height, the same happens. When I do put content in and set the height to 100%, the background image only goes up until a certain point before the rest is cropped, and there will still be elements hanging outside of the image.I think I could resolve this problem if I could somehow set my wrapper height to the height of my background image so that when it is resized, the webpage would read the background Image height and readjust the wrapper as so. Is there a way to do this, or is there another way to solve my problem? Any help is appreciated.
Did you try
background-size : cover
I would like a div with a background-image that keeps the aspect ratio of the image, with a fixed height of 500px and i want no "padding" on the background of that div.
Is this possible to do?
I Can get a div with a fixed height and a background-image that keeps aspect ratio :
<div style="background: url(something.png) 50% 50% / cover #D6D6D6;background-size: contain;background-repeat: no-repeat;height:500px"></div>
This makes the image centered in the middle of the div ( either vertically or horizontally ) but gives some padding to the background of the div ...
Can anybody help me out ?
What you are trying to achieve is not possible using only CSS, you could use JavaScript to detect the width of the image and then set the width of the div to be the same. Or alternatively you could simply remove the background-image property and rather add the image as an img tag into your HTML. If you do that you can display the div as inline-block which will take care of making the div as wide as the width of the image.
body
{
text-align:center;
}
div
{
background-color:#666;
display:inline-block;
}
div img
{
height:500px;
}
<div>
<img src="http://lorempixel.com/200/500" alt="">
</div>
background-size: contain; will always display the whole image (without cutting off anything), thereby leaving some space either vertically or horizontally.
On the other hand, background-size: cover; will fill the whole DIV in a way that the shorter side of the image corresponds exactly to the length or height of the DIV (depending on the relation of the proportions between DIV and image) and the longer one is cut off on the sides or on top and bottom.
If you don't want a distorted image, those are the options you have.
I'm trying to fill a whole div with an image, regardless of the size of the image, but for some reason the image is only as big as it's default size. It does not automatically stretch to fit the size of the div. I tried setting the width and height of the image to 100%, thinking that it'll fit the div that way, but the image still stayed in its default size. Is there a way to automatically stretch an image to fill a div, without testing and changing each image by hand?
<style>
div {
border: 1px solid red;
width: 1000px;
height: 1000px;
background-image: url("side.jpg");
background-repeat: no-repeat;
}
img {
width: 100%;
height: 100%;
}
</style>
<div> </div>
From your question, it is unclear whether you are trying to use a background image or an img element to fill the div.
If you want to fill the div using an img element, the code you've posted will already do that for you. You just need to place an img element within the div, such as:
<div><img src="http://placehold.it/250x250" /></div>
If you want to stretch the image to fill the div using it as a background image, you simply need to add the value cover to the background-size property:
background-size:cover;
JSFiddle for img element
JSFiddle for background image
The <img> tag is an html element that has nothing to do with the background image of that <div>.
As APAD1 correctly points out, the proper way to force a background image to fill an html element is to use background-size.
background-size: contain fills the element until the background image touches the first edge of its container (maintaining the aspect ratio).
background-size: cover fills the element entirely while maintaining the aspect ratio of the image.
background-size: 100% 100% fills the element entirely so that the background image touches the edge of the element on all sides (thus potentially distorting the image).
Hi i want an always fit sceen background image and my index page contains 2 div and each of them got specific background image. Combining these 2 div background ima, i will got a full picture (each div bg img got 1/2 of that picture). The problem is the picture aspect ratio is 3:2 (1200x800 resolution) but background-image: cover CSS is auto scale both width and height so if i got different aspect ratio (such as 16:9, 4:3...), the full picture that combined from 2 divs are not right (wrong height from each div bg img). Is there any way to solve this problem?
cover is not the only option for background-size. It sounds like you should be doing something like:
background-size:auto 100%;
Which will set the background images to 100% height, but auto detect the width. Note that you aren't confined to percentages either:
background-size:auto 500px;
background-size:auto 31.25em;
will also work.
MDN has a solid reference for all the options available.
I have an image that I need to put divs on top of for links. I did this fine when I initially created the website, but now I am tasked with making it responsive, so I can no longer use -top and left values to position the overlay divs because they don't move with the image.
Trying to put the image as a background image so that the position of the overlays can be set and contained within the parent container.
I have tried using the background size property (cover, contain, 100%), but they will not make the div show all 400px of its height.
setting a max height, using auto, or 100% do not work either.
I would use min-height, but then the div would not scale down on mobile devices.
Does anyone know how I can get my parent div to be the full size of the background image?
One recommendation is to position the links using top and left percentages, ie:
#link1 {
position: relative;
top:2%;
left:2%;
}