I have an banner image that is 1920 x 1300 which I want to display within a container or jumbotron which is 800px height.
How can i fit the image in so that it is also responsive and so is the text ontop of it?
<div class="container-fluid>
<div class="image-container">
<h1>Title</h1>
</div>
</div>
CSS:
.image-container{
background-image: url("..images/background.jpg");
background-size: contain;
height:800px;
width: 100%;
}
Or would it be a better idea to re-size the image?
I would suggest to use an html <img> instead of an css background.
I've made an JSFiddle of how I would do that.
Set the inner content inside the <div class="image-container"> and set it absolute.
Here is the JSFiddle.
Related
I have a fixed size wrapper consisting of:
Header that is sized to the whats inside
Footer that is fixed size
Content container that should use the remaining space of the wrapper
The problem occurs with images. I would like for images to resize to fit the content container both in height and width. Right now images overflow the wrapper in height.
Here is the code. The wide image is acting correct, resizing to fit, but the long giraf is not.
In the following fiddle overflow is set to scroll to debug. The endgoal is no overflow.
https://jsfiddle.net/sghp68r0/
A not so flexible solution would simply be to give the imageFit class a height like
img {
max-width: 100%;
max-height: 100%;
}
.imageFit {
object-fit: contain;
height: 150px;
}
But this I would rather avoid hardcoding the height.
My goal is that it looks like this (no overflow):
if i am right you want this. Please do let me know.
Drag the height in fiddle you see the images are adjusting with heigh.
Here is my fiddle link:-
https://jsfiddle.net/exa3y7w9/
<div class="wrapper">
<div class="header">
Sized to content <br />
Sized to content <br />
</div>
<div class="content">
<div class="imageWrapper">
<img src="https://cdn.pixabay.com/photo/2017/10/10/22/24/wide-format-2839089_960_720.jpg">
</div>
<div> 2 images and some text that fills remaining space </div>
<div class="imageWrapper">
<img src="http://clipart-library.com/data_images/258951.jpg">
</div>
</div>
<div class="footer">
There is some text in fixed size container
</div>
</div>
So apparently you can fix overflow in flexbox by setting height of the containing div to 0 (for safari it should be min-height: 0). Have a look at this example. If you remove height breaks.
https://jsfiddle.net/oz20qgw9/
.content {
background-color: green;
flex:2;
height: 0; //THIS IS THE KEY!
}
I have an image which its size is 1050x700. I would place it in full screen when it is in desktop. the idea would be to place it when is in desktop version under the black bar in this way the image remain almost the same.
here it is the jsfiddle example http://jsfiddle.net/qLdp4czn/1/
in the mobile there is no problem because it fit the device display so it should back normal without placing it under the bar
here is the code:
<div class="container-fluid top-bar">
<div class="row-top">
<div id="central-block" class="text-center">
<p>Title</p>
</div>
</div>
</div>
<div class="img-background">
<img src="http://ppcdn.500px.org/75961441/84f7332982b9c76296fef33b528c7d6ddd22e5a0/5.jpg" alt="animal" class="img-responsive">
</div>
Put the image as a background-image instead and remove the img element:
.img-background {
background-image:url(http://ppcdn.500px.org/75961441/84f7332982b9c76296fef33b528c7d6ddd22e5a0/5.jpg);
background-repeat:no-repeat;
background-size:100% auto;
position:relative;
width:100%;
height:100%;
}
You might have to set the width and height of the element depending on your other CSS.
I have a typical bootstrap layout like this
<body>
<div class="container">
...
</div>
<div class="container">
...
</div>
</body>
but I want to do this
<body>
<div class="bg-img">
<div class="container">
...
</div>
<div class="container">
...
</div>
</div>
</body>
The basic background color will be a soilid color but I want a background image for the main content. I would like the background image to scale appropriately with the responsive aspect of the framework.
I basically want to know if this is advisable?
Use just one container and then you can nest your rows into it.
html:
<div class="container">
<div class="row bg-img">
<div class="col-xs3">...</div>
<div class="col-xs3">...</div>
<div class="col-xs3">...</div>
</div>
<div class="row bg-img2">
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>
</div>
css:
.bg-img {
background-image:url('http://placehold.it/200x200');
background-repeat:repeat-x;
background-size: 100%;
}
.bg-img2 {
background-image:url('http://placehold.it/200x200/fc43c');
background-repeat:repeat-x;
background-size: 100%;
}
http://jsfiddle.net/8y9Hr/3
By "scale appropriately", I suppose you mean you have an image of e.g. 1000px wide, and if the window is narrower than 1000px, you want the image to shrink to fit the width of the window.
You can use the CSS background-size property, however this won't work in IE8 and below.
Example which resizes the background image to fit the width of the screen, where image height is calculated automatically while maintaining proportions:
.bg-img {
background: #f00 url('image.png') no-repeat center top;
background-size: 100% auto;
}
You can use media queries to set a different size image to avoid e.g. mobile devices loading a 2000px wide image and resizing it.
Reference: http://www.w3schools.com/cssref/css3_pr_background-size.asp
I'm looking for a solution of my problem.
I am using twitter bootstrap for a mobile site and this is my outcome on mobile view:
<div class="row">
<div class="span4">
<div class="visible-phone" style="background-image: url('http://upload.tapcrowd.com/upload/catalogimages/719/catalogimagecardealer#2x.png');></div>
<p class="metadataTitle metacell">
<span style="display: inline-block" class="ellipsis">Car Dealers</span>
<span style="table-row"></span></p>
</div>
</div>
</div>
The css of the div where my image is in:
background-size:contain;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 300px;"
But as you can see there is a margin between the image and the content below, does anyone know how I can fix this?
background-size:contain;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:
"contain: This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area."
So your image has been scaled so that it fits into the element completely - you seem to want to use cover instead:
"cover: This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area."
Set margin:0; padding:0; to both the image and the content below. This will remove any margin. Since HTML adds a margin by default, you need to explicitly tell HTML to remove a margin.
I'm using cssgrid.net which is a 12col 1140px responsive fluid framework and I'm having trouble centering things.
My website has a "background-size: cover;" image and I have a logo that I want to center horizontally within the browser, even when it's resizing.
This is the HTML I have:
<div class="container">
<div class="row">
<div class="fourcol"></div>
<div class="fourcol">
<div class="logo"></div>
</div>
<div class="fourcol last"></div>
</div>
And the CSS:
.logo {
background: url(../images/logo_retina.png) no-repeat;
background-size: 175px 175px;
}
This is what the top portion of my site looks like:
The logo starts in the second set of 4 columns like it should, but how do I make it centered within that set of 4 columns, even when resizing?
Please keep in mind coding is just a hobby.
Assuming that each div.fourcol has the same fixed width I think that background: url(../images/logo_retina.png) no-repeat center middle; should help. If they are floating one another with width set to auto then it will be problem as div.row may be wider than the cumulative width of div.fourcol.