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%;
}
Related
I am making a web page with a large background image where the position of some elements, like text blocks or buttons, has to be linked to certain parts of the image. Horizontal alignment is fine but I am facing problems with the vertical alignment. Namely, if the window is resized such that its aspect ratio changes, the background image is resized according to the window width. But the vertical position of the elements is expressed in % of the window height (I am using css top property, like top: 60%;). As a result, the elements get shifted vertically with respect to the image. Is there a way to adjust the vertical position according to the window width? Then each element would keep its position with respect to the image.
I used code like
position: absolute;
left: 30%;
top: 60%;
Left scales properly here but top does not.
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
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 have a jumbotron at the top of my site, with a background image which resizes fine when I resize the browser window.
I have another background image that lays on top of the jumbotron background image. I have been setting different breakpoints for that overlaying image using position: relative; and passing the appropriate pixel amount to top, left, width and height styles.
The reason I do this, is because the overlaying image needs to decrease as the web browser size decreases, and the reason I use top and left is because I want to have the bottom of the overlaying image line up with the bottom of the jumbotron background image at that breakpoint.
I know if I set the overlaying image to use a .make-sm-column(5) and the appropriate offset, it may work, but I am having trouble lining the bottom of the overlaying image to the bottom of the jumbotron background image.
Example html:
<div id="jumbotron">
<div id="jumbotron-man"></div>
</div>
The css just sets the background-image and position to relative, and for each breakpoint it sets the top, left, height, width of the image, I do not currently use .make-sm-column or offset for the overlay. There are other overlays and text divs on the jumbotron, but I thought just asking about this will give me push in the direction and allow me to apply the same to the other elements overlaying the jumbotron.
As seen in the image, you can see how I want it lined up
I feel like I am not taking advantage of bootstrap in this situation, any guidance is appreciated, thank you.
There are some different ways, a common way is to set position:relative; on the parent and position:absolute; on the child, to position the child at the bottom set bottom:0; for the child.
So:
CSS:
#jumbotron {
position: relative;
}
#jumbotron-man {
position: absolute;
bottom: 0;
}
HTML:
<div id="jumbotron">
<div id="jumbotron-man"></div>
</div>
I've looked for an answer and found some but they look to only be for divs with background colours, not background images with corners etc. My example is at (removed)
I want the menu and the "page" to be the same height 100% of the time. No matter which one is larger ie if the page has more content the menu has to stretch and vice versa.
As you can see, the shadows etc for the background images are divs absolutely positioned within the respective divs and then z-indexed lower than the container...
Am I going about this the wrong way? Insight would be very helpful, thanks in advance!
Set the div's height property to 100% of it's parent, which will be the body of the document or a containing div. Then simply set margins for the top and bottom.
#menuDiv {
height: 100%;
margin: 100px 0 25px 0;
}
Same for the content div. The div's size properties won't change for the background image. Although it might be better for you to put both divs in a containing div with both children (menu and content) set to 100% of it's parent, then set a minimum height on the containing div which is equal to the height of the menu. If you don't do this and the content div is smaller it'd look ugly.