I currently have the following:
html {
background-image: url('../bundles/app/img/bg-tile-main.png');
}
now since I've put bg-tile-main.png into a sprite.. how can I have the same effect as the above? As far as I have researched I can't repeat background when using sprite?
you can't do that yet, in future you will be allowed to use
background:image-rect(url('img.png'), 16, 16, 16, 16) repeat top left;
currently supported only by Firefox
more info here:
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-image-rect
example on MDN:
https://developer.mozilla.org/samples/cssref/moz-image-rect/ (works only on FF atm)
Along with background-image, you need to give the background-position. Then you can repeat a particular image in the spritesheet.
For getting the position, use spritecow,an online tool.
Updates:
Here is my sprite image
#rr {
background: url('http://files.simurai.com/misc/sprite.png') repeat-y -257px -8px;
width: 40px;
height: 661px;
}
JSFiddle
FYI: Where repeat-x is not working, since the width covers the image specified.
Here is a pretty heck about repeating the background-position,
Background repeat and CSS sprites
The rule is pretty simple: if you want the background to repeat
vertically (top to bottom), place the images in the sprite
horizontally (left to right) and make sure the individual images in
the sprite have the same height. For the opposite case: when you want
to repeat horizontally, sprite vertically.
Related
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.
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.
im trying to figure something out.
i have a simple webpage with a pattern background that is repeated, what i want to do in css is create a color overlay using multiple backgrounds. my code is this.
html,body {
background:
rgba(200, 54, 54, 0.5),
url(../img/background.png) repeat;
}
however it makes nothing show, just a white screen, if i switch the background positions and put the image on top then i can see it does find the image and displays that but obviously with no color overlay.
did i miss something in how i think this should be working? does it not work on the html,body tags?
any help is greatly appreciated.
Thanks
Nick
rgba() is a color value. You can only have a color value in the last background layer; specifying a color on any other layers makes the syntax invalid.1
If you need to overlay the background image with a semitransparent color, the only workaround for one element is to create an image of that color and overlay that instead. But since you're trying to apply a page background, you should be able to simply apply the color overlay to body and the image to html:
html {
height: 100%;
background: url(../img/background.png) repeat;
}
body {
min-height: 100%;
background: rgba(200, 54, 54, 0.5);
}
Just keep in mind that body needs to cover the entire area of html as well, otherwise your color will only overlay part of the background image. The height and min-height styles above enforce this for height; for width, you will need to make sure body does not have any side margins or a width that's less than 100%.
See this answer for a more extensive write-up on both approaches to html and body backgrounds.
1 It's understandably puzzling why colors are forbidden from any layer except the bottom one considering that color values with alpha channels exist and that you can still work around it with an image with the same alpha channels and the browser would still have to composite the background anyway. But that's just how it is, I guess. It doesn't look like this limitation is going to be addressed in Backgrounds level 4 either, so what do I know.
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