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;
}
Related
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;
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 have applied set background-image on one of my <div> with the following properties below:
.mydiv-left {
background: url(path to image) no-repeat center center fixed;
height:auto; // also tried with 100%
background-size:auto // also tried with "100%" and "100% 100%" as well as "cover"
}
This result is no image display, but when I set the height to this image, it cuts off the image. As image is of high resolution and I want it to fit in the smaller area of my div without removing any part/information.
Keep in mind that background image is dynamic and keep on changing for other divs within the loop.
Try this
CSS
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}
If you post the entire code it is easy to find solution.
<div> without content/ height will result in 0 height. I guess that's why you can't see your image.
Give your <div> a size, and background-size should do its work.
http://jsfiddle.net/LsdDE/
.d1, .d2 {
border: 1px solid grey;
width: 200px;
height: 200px;
background: url(https://www.google.com.tw/images/srpr/logo11w.png);
}
.d1 {
background-size: auto 200px;
}
.d2 {
background-size: 200px auto;
}
Simplest suggestion would be to give min-height to your div in pixels... DEMO , keeping your markup same, below is the CSS.
CSS
.mydiv-left {
background: url(http://www.wallng.com/images/2013/08/image-explosion-colors-background-beautiful-263613.jpg) no-repeat center center fixed;
color : #FFF;
min-height:200px; /*this is the key*/
height:auto;
background-size: 100% 100%;
background-repeat: no-repeat;
}
if you give height:auto;, it would scale the div to content height.
if you want to show the div anyway, min-height is a solution
Thanks all for helping me out, I was able to get it done with the following below code:
mydiv {
background: url(images/bg.jpg) no-repeat;
height: 150px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Main thing was last four lines that worked for me the way I wanted.
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}
More specifically, is it possible to scale a tiled background image using CSS3's transform:scale(x,y)?
While you can't use transform:scale(), if you know the final size of the background image that you need, you can you can use background-size to get the same effect.
.selector {
background-image: url(http://path/to/image.png);
background-size: 200px 100px;
}
However, if you always want to, say, "double" the width of the image that you use as a background, then that doesn't seem to be possible at this time.
EDIT: Note that while the background-size style supports % based parameters, it's not as a percentage of the image size, but the size of the window.
You can use :
background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px;
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;
(or)
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
(or)
#bg {
position:fixed;
top:0;
left:0;
/* Preserve aspet ratio */
min-width:100%;
min-height:100%;
}
I'm not good in CSS. But just the idea: create background div with tiled background (using z-index) and scale it. It should work
Yes you can scale it but try using percentage.
background-size: 100%;
But you need to consider the different resolutions of a screen. 4:3 4:9 etc.
I would recommend you to use this jQuery script. jQuery Strech Background