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;
Related
I was trying to make uber's site.I want to add space between background image and div.
I tried using margin , padding and top 50% but none of them worked.I just want to add space from top
Html
<header id="main-image">
<div class="main-navigation">
</div>
</header>
Css
#main-image {
background: url(/images/earn_2x.webp);
width: 100vw;
height: 100vh;
z-index: -55;
}
.main-navigation {
width: 80%;
margin: auto;
height: 200px;
background: #fff;
}
Try background-position. This works only when background image is not set in repeat mode.
For eg:
background-position-y: 10px;
background-repeat: no-repeat;
This will add 10px space from top.
I have the following code:-
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 565px;
display: block;
background-size: cover !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
What I want to achieve is:-
When you start shrinking the browser width from 1920px to 1170px it will cut off (crop) the left and right part of the image.
So if the browser width was at 1720px, essentially 100px will be removed from the left side of the image and 100px removed from the right but the image will retain the 565px height.
How can I achieve this?
I have made a JSFIDDLE of the code I have at the moment.
Use these settings for the background:
.expert-header {
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center center no-repeat;
background-size: auto 100%;
}
-> i.e. height 100% of parent element, width proportional to height (auto), centered in both directions (where only the horizontal centering is effective) and witout repeating.
Here's a fiddle: https://jsfiddle.net/q3m23Ly8/1/
(I also removed the style attribute from the HTML)
Remove the inline style of the div element because it will overwrite the CSS rules:
background-size: auto 100%;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center;
The important part is the background-size. auto 100% will tell the browser the background should always cover 100% of the height, the width will be calculated automatically.
Try below css for responsive:
Set the div height as per you needed.
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 250px /* Set height as per you needed */;
display: block;
background-size: 100% auto !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
background-repeat: no-repeat !important;
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
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
}
I have this fiddle which generates single country flags from a image sprite. I want to squeeze each flag because the width of flag seems to be too wide.
JSFiddle Demo
For instance the Norwegian flag is too wide in the jsfiddle sample.
How can I do this? Thank you.
#flag1 {
width: 120px;
height: 60px;
background-image: url(http://i.hizliresim.com/e7Y5dm.png);
background-position: -120px 0;
}
#flag2 {
width: 120px;
height: 60px;
background-image: url(http://i.hizliresim.com/e7Y5dm.png);
background-position: -480px 13800px;
}
#flag3 {
width: 120px;
height: 60px;
background-image: url(http://i.hizliresim.com/e7Y5dm.png);
background-position: -1200px 19020px;
}
To get exactly what you wanted I used background-size just to reduce the width of your sprite.
So I reduced the width of the sprite about one sixth and adjusted the width of the element in accordance.
#flag3
{
width: 100px;
height: 60px;
background: url(http://i.hizliresim.com/e7Y5dm.png) 0 0 no-repeat;
background-position: -1000px -480px;
background-size: 1500px 780px;
}
Demo
One solution is to scale (transform:scale(x);) the whole element (the div in this case)
For example transform:scale(0.5); will scale the element to half its size, but keep in mind that it retains the initial space in the DOM flow.
Another way is to use the background-size property to resize your image, but you will have to recalculate the positioning as well..
demo at http://jsfiddle.net/JA97b/5/
Additionally, in your CSS you should group common properties to a single class and apply that instead of repeating tem for each flag..
.flag{
width: 120px;
height: 60px;
background-image: url(http://i.hizliresim.com/e7Y5dm.png);
}
#flag1{background-position: -120px 0;}
#flag2{background-position: -480px 13800px;}
#flag3{background-position: -1200px 19020px;}
and use
<div class="flag" id="flag1"></div>
<div class="flag" id="flag2"></div>
<div class="flag" id="flag3"></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;
}