Why is my banner image collapsing in a100% div? - css

Tried to use slick banner lib this time around at the request of a client and my image seems to be collapsing inside of the div at 100% width and 500px height. I'm looking for it to re-scale # a height of 500px. Have looked around and seem to be doing as recommended?
http://www.cucoders.com/
.slick-slide img
display: block;
height: 500px;
width: 100%;

Was able to get image fully responsive by using the code below. When just using background-image: cover; the image is not fully responsive and collapses on it's self. The below css works.
.background-image-3 {
width: 100%;
height: 500px;
position: relative;
background-image: url("http://www.cucoders.com/images/background.png");
background-size: cover;
background-attachment: scroll;
background-position: 50% 0px;
overflow: hidden;
}

Related

CSS: background-size cover but not allowing image to grow past its own width

If I am using background-size: cover; for a background image and that image is only 800px wide but the viewport is 1500px wide, how can I make it so that the image does not exceed its own width? (I don't want it stretched any larger than it's original size.)
header.hero {
position: relative;
clear: both;
overflow: hidden;
min-height: 390px;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
}
Add this css:
max-width: 800px;
But I don't want to add a CSS definition every time I use a different
image...
So you can try add CSS properties:
width: auto; - your image width will be scale to img height
max-width: 100%; - your image never will be wider than container wrapper

How to maintain proportion on max width and fixed height?

I am trying to make something like this. The top image is 100% width of the browser but shorter than 100%height of the browser, so the content peeks up a little bit ( the tops of the two images below are showing ).
Also, when the brower size is scaled, it maintains it's aspect ratio and the two images always show unless the responsive breaking point #media only screen and (min-width:768px) has all of the images stack on top of eachother.
Here is my css:
.thumb-12 {
width: 100%;
height: 100%;
position: relative;
}
.thumb-12 img {
width:100%;
height: 100%;
max-height:700px;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
z-index:100;
}
this works well until it gets passed 1500px or so width wise, then it starts to stretch the image.
Is this possible to do with pure css?
I added a wrapper div around the image div, and gave it overflow:hidden and the fixed height of 700px; while keeping the height of the actual image 100%;
.thumb-wrapper {
max-height: 700px;
overflow: hidden;
}
.thumb-12 {
width: 100%;
height: 100%;
position: relative;
}
.thumb-12 img {
width:100%;
height: 100%;
height: auto;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
z-index:100;
}
It makes no sense applying a background to an img tag. Apply this directly to your container (which seems to be thumb-12) and remove the img tag.
.thumb-12 {
width: 100%;
height: 700px;
background: url('your_image.jpg') center center no-repeat;
background-size: cover;
}
Please note that the parent of this element must have a determined height if you want height: 100%; to work on all browsers (except if all parents have the same property, until body).

Background image disappear when I use CSS auto property

I have a span with a background where I want the image resized without loosing the radio. I mean not stretching. My image disappear when I use height: auto;
#logo_span{
display: inline;
background-image: url("../gfx/hs_logo.png");
margin: -5px auto auto -100%; /* margin top right bottom left */
background-size: 50% 50%;
background-repeat: no-repeat;
width: 90%;
height: auto;
}
You will need to set the height to an integer or percentage like so:
#logo_span{
display: inline;
background-image: url("../gfx/hs_logo.png");
margin: -5px auto auto -100%; /* margin top right bottom left */
background-size: 50% 50%;
background-repeat: no-repeat;
width: 90%;
height: 250px;
}
Another way would be to place an <img> inside this div but have another div with the same properties but instead of have an img have the background-image. However this is considered messy and can slow down loading speeds as your loading 2 of the same image.
<div class="hiddendiv">
<img src="//file src">
<div class="visiblediv"></div>
</div>
<style>
.hiddendiv img{height:200px; width:500px;}
.visiblediv {height:200px; width:500px; margin-top:-200px; background-image:url(//path to your image);}
</style>
This is just a rough example but this has worked for me in the past, no matter how much im not a fan of this method.
If you want responsive image use <img/> tag instead css background-image. And then in css use width: 90%; height: auto;

Fit div size to background image

I'm trying to set the size (both width and height) of a div to match it's background image size, but I can't get it working.
The background image size has to be in percentages, because I'm dealing with a responsive website. On smaller screens, the background should be displayed completely (with less width, but still proportional), and the div who has the image should follow that size.
I tried various values of the background-size, such as auto 100%, cover, contain, etc. but nothing did the trick.
There's a similar question here about this: scale div to background image size but it didn't solve my problem either.
I'd really appreciate if someone knows how to do it.
EDIT:
I made a fiddle to show the behavior: http://jsfiddle.net/osv1v9re/5/
This line is what is making the background image so small:
background-size: auto 100%;
But if it is removed is removed, the background will fill the proper width, but not the height.
tag cannot adapt to background-image size, you need to use an tag and choose between height: auto for the div or javascript
// **** Problem ****
// Wrong html :
<div class="my_class"><div>
// with css :
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
//**** Solution ****
// use css:
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: contain;
}
*{
padding: 0;
margin: 0;
}
div{
width: 100%;
}
div figure{
padding-top: 36.56%; /* 702px/1920px = 0.3656 */
display: block;
background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top;
background-size: cover;
}
<div>
<figure></figure>
</div>
you can have a responsive height using the padding-bottom or padding-top
because you can't fix an height property in '%' with a width in '%'.
div{
background-image: url(url);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
margin: 0 auto;
width: 100%;
padding-bottom: heightPicure / widthPicture + %; //do it manually or using scss rules
}

How to stretch the background image to fill a div

I want to set a background image to different divs, but my problems are:
The size of image is fixed(60px).
Varying div's size
How can I stretch the background-image to fill the whole background of the div?
#div2{
background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
height:180px;
width:200px;
border: 1px solid red;
}
Check the code here.
Add
background-size:100% 100%;
to your css underneath background-image.
You can also specify exact dimensions, i.e.:
background-size: 30px 40px;
Here: JSFiddle
You can use:
background-size: cover;
Or just use a big background image with:
background: url('../images/teaser.jpg') no-repeat center #eee;
Modern CSS3 (recommended for the future & probably the best solution)
.selector{
background-size: cover;
/* stretches background WITHOUT deformation so it would fill the background space,
it may crop the image if the image's dimensions are in different ratio,
than the element dimensions. */
}
Max. stretch without crop nor deformation (may not fill the background): background-size: contain;
Force absolute stretch (may cause deformation, but no crop): background-size: 100% 100%;
"Old" CSS "always working" way
Absolute positioning image as a first child of the (relative positioned) parent and stretching it to the parent size.
HTML
<div class="selector">
<img src="path.extension" alt="alt text">
<!-- some other content -->
</div>
Equivalent of CSS3 background-size: cover; :
To achieve this dynamically, you would have to use the opposite of contain method alternative (see below) and if you need to center the cropped image, you would need a JavaScript to do that dynamically - e.g. using jQuery:
$('.selector img').each(function(){
$(this).css({
"left": "50%",
"margin-left": "-"+( $(this).width()/2 )+"px",
"top": "50%",
"margin-top": "-"+( $(this).height()/2 )+"px"
});
});
Practical example:
Equivalent of CSS3 background-size: contain; :
This one can be a bit tricky - the dimension of your background that would overflow the parent will have CSS set to 100% the other one to auto.
Practical example:
.selector img{
position: absolute; top:0; left: 0;
width: 100%;
height: auto;
/* -- OR -- */
/* width: auto;
height: 100%; */
}
Equivalent of CSS3 background-size: 100% 100%; :
.selector img{
position: absolute; top:0; left: 0;
width: 100%;
height: 100%;
}
PS: To do the equivalents of cover/contain in the "old" way completely dynamically (so you will not have to care about overflows/ratios) you would have to use javascript to detect the ratios for you and set the dimensions as described...
For this you can use CSS3 background-size property. Write like this:
#div2{
background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
height:180px;
width:200px;
border: 1px solid red;
}
Check this: http://jsfiddle.net/qdzaw/1/
You can add:
#div2{
background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
background-size: 100% 100%;
height:180px;
width:200px;
border: 1px solid red;
}
You can read more about it here: css3 background-size
by using property css:
background-size: cover;
body{
margin:0;
background:url('image.png') no-repeat 50% 50% fixed;
background-size: cover;
}
Use:
background-size: 100% 100%;
To make background image to fit the div size.
To keep the aspect ratio, use background-size: 100% auto;
div {
background-image: url('image.jpg');
background-size: 100% auto;
width: 150px;
height: 300px;
}
Try something like this:
div {
background-image: url(../img/picture1.jpg);
height: 30em;
background-repeat: no-repeat;
width: 100%;
background-position: center;
}

Resources