This question already has answers here:
Fit div size to background image
(3 answers)
Size the DIV to the size of the background image
(3 answers)
Closed 4 years ago.
I have a div with some content and want to have a background image. However, I want to be able to see the full height of the image. I could add a load of padding to the top and bottom of the content but I want this to be dynamic for all screen sizes.
div{
background-image:url(https://via.placeholder.com/350x150);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* height 100%; */
text-align:center;
}
<div>
Some content
</div>
I know I could also just add an <img> tag to the <div> but there is a lot of content in this that would then have to be floated around to overlay the image.
I don't mind using JS/jQuery to resolve this.
To make something fit the full height of the screen instead of using 100% as you would for width, using vh, so in your case:
height: 100vh;
This will work dynamically depending on the users screen dimensions, you can read more about this as well as see examples here.
Related
This question already has answers here:
CSS - how to overflow from div to full width of screen
(3 answers)
Closed 4 years ago.
Let me give an example of my problem: I'm working with magento (just explaining) and i want to make a full-width banner. Perhaps, Magento by default place a
class="container"
div that limit the width for the custom grid they have. So, i don't know what to do to get the full-width banner when it's placed (forced by Magento structure) inside a div with max-width setting.
In fact, i did some "margin" and "padding" configuration, but i'm trying to avoid this exaustive path just for one banner.
Here is my example: https://jsfiddle.net/mq4sr8d8/1/
<div class="background-size"><div class="outside"><div class="inside"></div></div></div>
You can achieve what you want in - if the outside div is centred, you need the following styles for inside:
.inside {
background-color: #ababab;
width: 100vw; /* make as wide as viewport */
margin-left: 50%; /* move it 50% right width of container */
transform: translateX(-50%); /* move it 50% left width of itself (to make it start at beggining of screen */
height: 100%;
}
Centred container fiddle
If your container is left aligned, just add the width:100vw
Left container fiddle
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.
This question already has answers here:
How to make a div 100% height of the browser window
(40 answers)
Closed 8 years ago.
I'm using Bootstrap for my responsive layout. Within the .container I want to have a div which isn't limited to the width of the container. Furthermore I want it to be stretched over the full body. I could place the div outside the .container but I don't want to mess around with absolute positioning or similar.
How can I make a div 100% to the body, even if the parent div is not filling the whole width of the body.
.div {
width: 100%;
height: 6px;
}
Thanks
Use class .container-fluid instead of .container. Bootstrap provide .container-fluid class to make full screen div.
If you are specific to some requirement please share code as well to understand better.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 8 years ago.
When you have images with
width: 100%;
height: auto;
contained in a box, depending on the aspect ratio(I think) of the image and the dimensions of the box it will not always populate the entire height of the box.
You don't really notice this when there is just one row of these images side by side but if they go onto a new row you can see a few pixels space between the top and bottom row. The boxes are touching but the images in the box are not taking up all of the height of the box.
I can't set a fixed height and width on these boxes/images as they are supposed to be fluid.
I'd like to get a solution to this without Javascript if possible but if that's the only solution I will take it.
JSFIDDLE
http://jsfiddle.net/BeYqu/
You can set display:block to images
img {
width: 100%;
height: auto;
display:block; /* add this */
}
Hope you need this.
Demo
This question already has answers here:
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Closed 9 years ago.
How Can I create a 100% height div of the current viewport size?
I know there are many resolutions around there, and I want to create a div that is high enough to cover the current size of the viewport.
Suppose the viewport is at the moment the size of one of a 1920x1080 resolution screen, but Also, someone else from a 1024x768 resolution screen wants to view the page, I want the div to be displayed 100% of the height of the viewport it is displayed on.
Is it possible with just css?
give 100% height to html and body, as well as to the div.
You can use a fixed position.
Add this to the body:
<div style="position:fixed; width:100%; height:100%; top:0; left:0;"></div>