I have a div with background image which contains 3 colors of the same icon
I shift the icon (background-position: top/center/bottom) according to what page is user viewing:
All works fine utill I zoom the page (ctrl + mousewheel) - than the background image seems to shift one pixel up or something, so i can see one-pixel line of the other icon at the bottom of my wrapper div:
Screens are from IE but it looks even more broken on iPad...
Any thoughts about what is causing this and how to fix it?
You can prevent any of the other images inside the sprite from showing by using diagonal sprites, or simply leaving some space between each image.
I shift the icon (background-position: top/center/bottom)
Use should use explicit px offsets instead. I suspect that will be slightly more robust when it comes to zooming.
There's nothing you can really do to prevent things sometimes being "1px off" when you zoom.
For example, if you have a 42px high element, and you zoom to 125%, then you have a 52.5px high element. The browser must round that number one way or the other.
Since those images are bitmaps, they always gonna look bad wen you zoom them.
You can do tree things:
Use a library like raphael JS and inlude your icons as vectors: http://raphaeljs.com/
Wrap your icons into spans for example and using a PX size and not EM's.
Leave more speace between your sprites
Try to make better resolution image and try it again.
It's better practice (and ultimately gives you much better control) to use pixel positioning rather than top/center/bottom when implementing CSS sprites, that way the image you want to show can be slightly larger (or with a little spacing) and therefore support that visual overflow you're seeing when you zoom. Your other images/states won't be affected by the neighbouring image/state because you're setting their position with a pixel-specific location rather than top/center/bottom e.g. (from article link below)
#panel-a {
background: transparent url(sprite.jpg) 0 -200px no-repeat;
}
#panel-b {
background: transparent url(sprite.jpg) -96px -200px no-repeat;
}
#panel-c {
background: transparent url(sprite.jpg) -172px -200px no-repeat;
}
#panel-d {
background: transparent url(sprite.jpg) -283px -200px no-repeat;
}
Not to mention that pixel positioning allows you to add additional states to your image without affecting other existing states if you add them onto the bottom of your image, for example. Of course that changes when you start adding images horizontally.
Here's a good reference: http://www.alistapart.com/articles/sprites
Related
On my site, I'm having issues with the repeating-linear-gradientelement in CSS. For the majority of the page, the background looks ok. But suddenly, when I scroll down, it looks as if the gradient just shifts one bar to the right and makes my page look ugly. This is what I currently have as CSS:
background:repeating-linear-gradient(45deg,transparent,transparent 50px,rgba(255,255,255,.1) 50px,rgba(255,255,255,.1)100px), #81D4FA;
I'm really having trouble, and it would be great if someone could help me. Thanks.
As was mentioned in the comments, background-attachment: fixed; will prevent the seam from being visible, but the stripes do not scroll with the page.
According to MDN:
A repeating CSS linear gradient is not a CSS <color> but an image with
no intrinsic dimensions; that is, it has no natural or preferred size,
nor ratio. Its concrete size will match the one of the element it
applies to.
This means that the positioning of the edge of the image depends on the size of the element, and a 45deg line will not line up with its neighbors unless one of the dimensions is a multiple of the other. I recommend making a tile-able image in your image editor of choice and loading it as an asset rather than using repeating-linear-gradient() if you don't want the background to be fixed in place.
I'm having a little problem with one of my background images in a div element. I'm using the following CSS:
.myBox
{
background-image:url('....');
background-repeat:no-repeat;
background-size:cover;
}
My background image is a picture with some people on it. Now, if I increase the width of my browser window, at a specific point, some of the people are cutted off (due to the automatic resize of the image with 'background-size:cover').
My question is: Is there any option (or jQuery plugin), to set a specific part on the background image that will be always visible on all window sizes and also fill the whole element?
There are a variety of solutions you could try; however, you might want to start with something simple like applying a background-position.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Using the background image of the group of people as an example, you might set background-position: top so that their heads never get cut off. You can also set the vertical and horizontal position in pixel or percent units.
try boostrap3 img-responsive class
.img-responsive Makes an image responsive (will scale nicely to the
parent element)
http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
What the difference between background: no-repeat center center;
and background-size: cover; ?
Both achieve basically the same effect as a background image on my website. No difference as far as I can tell in results.
background: no-repeat centre centre;
is saying place a background image in the element, but only show one instance of it (no-repeat), try looking at thebackground-repeat property to see other options.
The CSS then says place the image in the vertical centre, and horizontal centre of the element. This is related to the background-position property.
It might be worth you trying to reducing the image size to something small 10px x 10px to see the effect of no-repeat, vs repeat-x, repeat-y and repeat.
background-size: declares how big you want the background image to be (this allows dynamic resizing of the image much like height and width in the html img tag), this is a property introduced in CSS3.
By default this is the background-image's default/native resolution. By using the be cover value you are saying scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
I have put links on each of the properties so you can see the possible values for each. I recommend you look at all of the background-* attributes on w3schools. Look on the left hand side and they are all listed ;)
Alternatively if you're new to CSS, I would recommend this free course by Udacity which has plenty of video tutorials and guides you through HTML & CSS web development.
For clarification look at the following images.
The first one is what I intend to achieve. It's a text input element with two background images, one on each side.
The second image is the sprite image containing the icons I need.
Now my question is, is it possible to clip a background image to only display a portion of the image? Furthermore is it possible to use it with multiple backgrounds?
1st image:
2nd image:
You're going to have to use two separate icon images to get this to work as you expect at the moment.
With CSS sprites, the background is clipped by the size of the element, there is an experimental CSS3 property called background-clip but it doesn't work the way you want (it will clip to the borders, padding or content of the box, not a specific dimension.)
So create two icons, use one on each side of the element with background-position.
As you can see here, with a spritesheet it will display the entire background image instead of the two icons you want. There is as yet no way to clip BG images in the way that you want. (one day, hopefully!)
You will need to use separate icons OR you will need to have 2 additional elements (for showing the icons) overlaid on top of the input box. The latter will let you use the sprite itself.
Set to your element (let's say div) yor big backgound picture and then adjust with background-position. Your image will be croped by your element size (ex. div).
in your case it will be around:
background-position: -87 -35;
and div size:
width: 28px; height: 30px
with CSS3 you can use multiple background images for an element. to show a specific part from the image you need to set its background-position property.
for example:
background-image: url(sprites.png), url(sprites.png);
background-position: center bottom, left top;
you can also define background-postion in pixels like:
background-position: -5px 10px, -35px 10px;
for more information check this link
I have a transparent PNG that partially overlaps a button. The buttons becomes inactive where the image overlaps. Is there a way to turn the transparency "off" so the button is clickable behind it? Or are there any other tricks that might fix this problem?
The img transparency has nothing to do with whether or not you can click the button, so 'turning the transparency off' is not going to do anything for you.
As Mar_Garina points out, z-index is what determines which element lies above/below other elements. If you want that button to always be on top, give it a higher z-index. Note however that this image will the be overlapped by that button which may not be what you want.
Also check out button sliding doors with css if you're looking for some custom button styling
I would say that in general, there is indeed no solution to the problem. An image area is always rectangular, no matter whether its pixels are transparent or not.
However, #Chief17's answer gave me an idea that might work if your button is not using the OS's rendering style, and doesn't have a background image itself.
If that is the case, and the general layout situation permits it, you could set the image that should overlap the button as that button's background image - in addition to the image floating around on the page. Using background-position, you would then have to adjust the image's position so that it almost leaves the visible area of the button, covering only the small overlapping area that the button should not cover.
Is that understandably put? It's using the button's background-image property to fake overlapping while in truth, the overlapping area is the background image of the button.
This works only when you have really tight control over the button's position and other factors. It may not work out for you.
give the button a higher z-index maybe?
Give the button a higher z-index to make it come above the transparent image
document.getElementById('buttonId').style.zIndex = -5
Although I wouldn't recommend it, you could create an anchor with the following style:
a.className {
display: block;
width: [width of button];
height: [height of button];
z-index: [above image];
}
To mimic the button action....
Couldn't you do this instead:
<style type="text/css">
#button
{
background-image: url("[image location]");
width: [image width];
width: [image height];
}
</style>
And
<input type="button" value="button" id="button"/>
This makes the button clickable and makes the image ontop.