One Pic
How can the website use one image and use its parts as backgrounds for different elements , How can this be achieved.
They simply use different background positions to specify which image on the sprite sheet/picture they are using. For example inspect the element of the ufo image you have highlighted above. And change the css background position to -390px then the above and below images will become the same as positive specified will be same.
This is done to reduce the load on the server since now only one Image is loaded - the main picture instead of 10 different ones.
See this jsFiddle here i have used this image and just using different background position for each img's css code. Please ask if you need further clarification.
You can set this background for any span you want. Rest to do is to cut the right part out.
Let's say you have one class for the image, it's:
.sp {
background-image: url(your/picture.png);
}
You apply this class to all spans that need the picture.
Then you cut out single pics from it:
.sp.button1 {
background-position: 20px 50px;
height: 28px;
width: 50px
}
(random nubmers)
You can specifiy you first pic with class="sp button1" then.
Related
I want to blur the background of a dive or any html containers without its inside elements.
Well I tried googling for it and found that it can be through html2canvas (creating image from beneath objects and then blur it) and also using -webkit-backdrop-filter has no effect yet.
What I want is a live blurred container similar to windows 10 menus background in the screenshot bellow.
I would blur the original background using Photoshop or something, and then put it as a background image and play with the position. like this:
container {
background-image: url("blurredbg.png");
background-repeat: no-repeat;
background-position: 30px 0px;
}
please refer to this page for more information about background positioning.
You can, of course, control the positioning dynamically with container.style.backgroundPosition="100% 0"; in javascript
I guess you can use the following stackoverflow answer to
check if div have elements
.
if elements are not present then you can use
document.getElementById("yourId").blur(); to blur your div you can refer learn more about blur
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
iPhone devices look best when you give an image that is twice the size of the actual pixels needed. When you use contain it will make the image look crisp and nice.
I made a background image for a control with 2 states. On & Off. To be efficient instead of making two separate images I made a file where all I had to do was change the background-position-x property when I clicked on the control to change the image.
This works, except... that contain will show the entire background image with both 'on & off' states.
Right now I'm using 2 different images to make the control change the image.
Is there a way to 'contain' the image but only to a portion of the source image files pixels? This way I could make it look nice but use 1 file instead of 2?
Or does this even matter for efficiency?
For background image sprites (that's what you call numerous images pieces in one file) I prefer to use elements like and position and size them so they're the exact size of the sprite piece I want to show.
So let's say you have a that needs a hover effect or anything that might need to images to swap in and out. The easiest thing to do is to add a inside the image so your basic html would be:
<a href="#><span></span></a>
Then you size the and add position:relative;
Then on your span set the height and width to 100% and add position:absolute; top:0; left:0; and apply your background image to the span.
Then you can do things like a:hover span { background: 0 10px; } etc etc.
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 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