I'm having an issue where as soon as I use the background-size property, it seems to reduce the size of the background rather than increase it.
div.someelement{
z-index: 100;
position: fixed;
background: url('spritesheet.png') no-repeat;
background-size: 200% 200%;
background-position: 0px 0px;
width: 50px;
height: 55px;
margin: auto;
left: 0;
top: 0;
bottom: 0;
}
I'd expect background-size: 200% 200% to double the scale of the spritesheet. The element in the spritesheet is actually 100px per 110px, and I'm trying to scale it down to this 50x55 box. What am I doing wrong and how can I achieve that?
I also don't care about IE8 compatibility.
Probably your image is larger than 100px.
If the div is 50px, and you set the bakcground size to be 200%, it means 200% of 50px, so your background will have a size of 100px.
If the native size of the image is bigger, then you are shrinking it. Not making it twice bigger.
If the box and the image have the same ration then use background-size:cover; or background-size:contain;
Update after comments
When using percentage values in background size, it is based on the dimensions of the element it is applied. So 200% on a 50px element will make the background image be 100px.
In you case you are better off using actual pixels, and since you want the background to be half its original size just set it to
div.someelement{
/*.. other properties ..*/
background-size: 262px 225.5px;
/*.. other properties ..*/
}
If you want to show a 524x451 size image in its original size, you need to count its scale/size based on the div's size, which will, in your case, be 524/50 = 10.48 (1048%) for its width.
And then, to make the 100x110 fit inside a 50x55 sized div, it has to be half of 1048, 524 (and using the same math for its height will give you 410).
div {
z-index: 100;
position: fixed;
background: url(https://i.stack.imgur.com/BdDOg.png) no-repeat;
background-size: 524% 410%;
background-position: -50px -50px;
width: 50px;
height: 55px;
margin: auto;
left: 0;
top: 0;
bottom: 0;
}
<div>
</div>
Related
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 an image which width is 50px and height is 20px, then I set it as a div's background:
background: url('close.png') no-repeat 0 0;
width: 71.875px;
height: 28.75px;
position: absolute;
top: 50px;
background-position:center;
background-size:100%,100%;
although the div's width and height is not as the same as image, but the ratio is the same, both are 5: 2. but the result is strange:
There exist a gap line between the div and its above element. It seems the image doesn't stretch at the top.
Why this happened? How can I solve this problem?
You can't use commas in css rules
background-size:100%,100%; should be background-size:100%;
you should,
background-size:100%;
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 would like to get the effect shown here:
http://jsfiddle.net/abalter/k8G3C/
The background image is transparent. The logo and text overlay.
The problem is, I want the background image to repeat-y. It's fine with a wide viewport, but when the viewport narrows, the text passes the bottom of the image.
If I do:
body {
background: url(...);
opacity: 0.6;
background-repeat: repeat-y;
}
then the background repeats in the y-direction, but all child elements become transparent as well. I have not found a way to make the image transparent without the child elements.
I'm formatting the background image such that it scales with the viewport, but is always centered -- the middle of the image is always in the middle. ("CSS-Only Technique #2")
Any suggestions?
appling opacity: 0.6; to body will make the whole page transparent. Change img to div like this :
HTML:
<div id="background-image"></div>
Css : now you need to set the size of the background-image to 100% on the x-achse and auto to the y-achse and ad a z-index:0;
#background-image {
background-image: url(http://www.arielbalter.com/BuzzJoy/img/green_and_roasted_half_and_half.jpg);
width: 100%;
top: 0;
left: 0;
height:100%;
opacity: 0.6;
position: fixed;
background-repeat: repeat-y;
background-size: 100% auto;
padding: 0;
margin: 0;
z-index:0;
}
Demo:http://jsfiddle.net/k8G3C/4/
This is my HTML:
<div id="user-avatar"><img src="/imgs/frame.png" alt=""/></div>
user-avatar class is following:
#user-avatar {
width: 100px;
height: 100px;
margin: auto;
position: relative;
background: url(images/avatars/128.jpg) 50% 50% no-repeat;
}
Frame:
#user-avatar img {
position: absolute;
top: 50%;
left: 50%;
width: 122px;
height: 127px;
margin-top: -62px;
margin-left: -63px;
}
Original user-avatar background image dimensions are 23x25 but I want it to be resized to the 100x100px, and the problem is that whatever I set in the width: xxx attribute it'll not work. The avatar that is behind the frame has everytime his original dimensions.
You can't resize an image set as background of a container. The only way you can resize a image is using a img tag and resizing it with width and height css attributes.
Take a look here may be it helps.
You could use background-size, however only the most current browsers support it: https://developer.mozilla.org/en/CSS/background-size
You can use the CSS3 background-size property, for those browsers that support it, then fall back to a compromise solution for older browsers. The compromise solution could be to set a background color to fill up the space around the background image or to use the background-repeat property to "tile" the image.
For example:
#user_avatar {
...
background: url(images/avatars/128.jpg) blue 50% 50% no-repeat;
background-size: 100px 100px;
}