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%;
Related
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>
I'm trying to center an image inside a div, it gets close, but still is not really centered. The image is 976x976 px. The following is the CSS:
div {
margin-left: auto ;
margin-right: auto ;
border:1px solid #ccc;
max-width:976px;
height:976px;
min-width: 433px;
padding:0;
background: url("images/background.png") center center no-repeat;
}
The image must to be centered, but its exorbitant at the top and right, that is:
Looking at your provided URL I saw that positioning the background-image is indeed positioned more towards the top due to the fact the bgimage is larger than the div itself. Therefore you need to play with the percentages.
background: url("images/background.png") no-repeat 50% 18.5%;
Could solve your problem and place the image in the center of you div
Seems to be working fine??
Ive changed the order of your shorthand css and used 50% instead of center.
div {
position: absolute;
width: 100%;
height: 100%;
}
div {
margin-left: auto ;
margin-right: auto ;
border:11px solid red;
max-width:976px;
height:976px;
min-width: 433px;
padding:0;
background: url("http://lorempixel.com/output/fashion-q-c-976-976-4.jpg") no-repeat 50% 50%;
}
<div></div>
Your image on your link is a rectangular image with the circle at the top so isn't square.
Crop that image for your code to work!
I'm sure this is correct behavior for the implementation I have, but I'm wondering if theres an easy way to do what I want to accomplish.
I have a background image that is a 3px x 3px pattern.
I want this pattern to repeat-x the full width (100%) of the element its set in, however I only want it to repeat-y for half of the width of the element its in (50%).
I have this implementation:
.element {
width: 100%;
background-image: url('/path/to/pattern.png');
background-repeat: repeat;
}
which successefully repeats the pattern throughout the entire element. To attempt to achieve the 50% repeat-y height, which is what I want, i tried:
.element {
width: 100%;
background-image: url('/path/to/pattern.png');
background-repeat: repeat;
background-size: 100% 50%;
}
However, the background-size skews the pattern image to 100%/50% height/width instead of keeping the desired repeat effect.
Is there any way to simply accomplish this?
Thanks
Make a graphic 3px wide and really tall with the different background below. Or, though more code, make a 'unit' of three divs: the base is a div with whatever other color/pattern you want that will be the 50% of the y. Next in that div is the background repeating to a fixed height and that one is positioned relative to the top of the base. The last div is just the content. Not as pretty as a simple CSS declaration, but it works across platforms and most browsers, even IE6.
How does your pattern look like? This may fulfill your requirements. Instead of using a background to display the PNG, you now use an img element, and set the width to 100% and the height to 50%. Or use a div to benefit from background:
<div id="element">
<div id="pattern"/>
<div>I'm at the top!<div>
</div>
The rules:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#element {
position: relative;
min-height: 100%;
}
#element #pattern {
background: url(path/to/pattern.png);
height: 50%;
left: 0px;
position: absolute;
z-index: -1;
top: 0px;
width: 100%;
}
Add another container div
You can create another div inside the container div & set its width to 50% of parent container div. Inside this div, you can fill your pattern.
<div id="container">
<div id="myPattern"></div>
#container{
width:200px;
height:400px;
background-color:black;
}
#myPattern
{
background-color:yellow;
height:50%;
width:100%;
/* fill pattern here */
background-image: url(tt.png);
background-repeat: repeat-x repeat-y;
}
JSFiddle
I load a background image through jquery into a DiV, and occasionally a modal pops up which stretches the screen height so that you have to scroll.
I wanted to have my bg image scroll with the view, but the issue is that height:100% apparently means 100% of the original height. The div doesn't stretch with the rest of the screen.
Why is that? Here is my code:
#bgDiv {
display: none;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: center center;
background-attachment:fixed;
top:0;
right:0;
position: absolute;
z-index: -9999;
}
Thanks!
If you set your position to fixed instead of absolute, it should stay, even when there is scrolling.
I'm positioning a small image in the corner of the background of a div. I want to include it in a sprite but I'm not sure how to set the size of the image from the sprite. My only solution I can think of is to place the image on the absolute bottom right corner of the sprite to force the size. A better solution. Here's the CSS so far:
background: url(images/fod-sprite.png) 99% 99% no-repeat #000;
background-position: -4px -154px;
Use the :before pseudo-class:
.test:before {
content: "";
float: left;
width: 16px; /* requires width */
height: 16px; /* require height */
margin: 0 5px 0 0; /* specify margin */
background: #000 url(images/fod-sprite.png) -4px -154px no-repeat;
}
Put the img within a span that's absolutely positioned, affix it to the lower right, then use the clip property to set the size from the sprite.
Here's the fiddle: http://jsfiddle.net/bengundersen/BSswy/
Edit: You can do this without the span as long as overflow is set on the parent div.
Another benefit of using a clipped img is that you can still print.