is there a way to crop a background sprite?
We have our background image to the CSS body class. Now, if there is not an element with a white background overlaying the rest of the sprite, we have this mess of all the other images there.
I tried background-size, but that doesn't do it. So is there a CSS value that I'm missing that defines not just the background position, but also the actual area the image that should be used?
Thanks!
https://www.w3schools.com/css/css_image_sprites.asp - This article covers the use case senario and correct execution of how to use image sprites.
Okay, so the only way I could work out for this is to put the main body page background at the bottom of the sprite. Assign the correct background-position values and add a background-color: #fff, so the rest of the page becomes readable text.
Thanks for your input!
Related
For clarification: I'm not asking how to darken an image when you hover over it. I'm wondering how to make other images surrounding the image your cursor is over darken.
Here is an example: http://www.b-reel.com/
When you hover over the big category images, the surrounding images darken, but the hovered image remains the same.
Any input would be appreciated. Thank you!
You don't make surrounding images darker. Instead, what you do is you put a div around all images, and when the cursor is over this div, all images are darker. But you also add div elements around each image, and you make an image less dark when the cursor is over it. The combination of both is what gives you the desired effect.
In the example you posted they are using JavaScript to apply a .fadeOut class on the other divs. That .fadeOut class sets the opactiy of the other divs to 50%.
I like sprites, they are extremely helpful to my overall needs, however. I am trying to figure out if there is a means of using a sprite image as a background image for an element thats 100% wide, but the background part of the sprite I want to apply is 1px wide. Where as the sprite is currently 100px wide and about 180px high currently. Is this even possible/legal? If so how would I do that? Or do I have to stick with the idea of a 1px by 120px image thats independent of the sprite to span a background the way I want to on a given element?
Note I thought about doing just the 0 0 position of the sprite as the BG I want but my issue with that is I have a similar portion of the sprite I want to use as a rollover effect for some areas
For a repeating background image you'd need to use an image that's independent of the sprite; as there is, to my knowledge, no way of specifying a particular segment of a sprite to repeat across the background, so you'd end up simply showing, and repeating, the entirety of the sprite.
And it seems, certainly in Chromium 19, that using background-size isn't the answer.
I think you might be able to achieve this through a pseudo background crop. There's a usful article here: http://nicolasgallagher.com/css-background-image-hacks/ that might help.
However, I'm skeptical that this can be used as a repeating background image. You might be able to stretch it (background-size:100%) but I'm not sure about that.
So it makes 3 divs placed inside one div. For left and right, clip your sprite as you would usually do. For middle, make your sprite LONG ENOUGH so that any middle part of the button is filled with the long portion of the sprite.
Never ask questions, use your imagination.
Good day, I have a DIV of fixed width and height on my HTML page. In normal state it should show image A on the background and in hover state it should show image B. I know how to do it using CSS and two image files A and B. Somewhere I saw those two images (A and B) put into a single image file and then they somehow wrote CSS so that in normal state the DIV showed upper half of the image on the background and in a hover state it showed the bottom half of the image. Could you please advise CSS code to achieve this? The DIV has no position set but it is a child of a DIV with relative position. Thank you in advance.
Vojtech
This is called CSS spriting and is an awesome technique that everyone should use.
See this answer for a good overview. What it comes down to is having a DOM element with a defined height and width and using a background image that is larger than that area. Then you can selectively show only portions of that background image using background-position
I added these icons http://grab.by/9HYW to my site and wanted to change the color on hover...what is the best solution?
The icons are in png format and would like to change on hover to their blue colors...thanks in advance.
You should generate new blue images with your editor (the one that you've created the first icons), then you use css hover.
You can use a css sprite (arguably the cleanest and most cross-browser comparable way) in which you basically have both the regular and hover state in one image and change the background-position of the div on hover. (xpixelz links should help you.)
If the images are actually printed on the page, you can use javascript to swipe the image with the hover state on hover.
I'm not sure how they are displayed on the page, but if they are on a solid colored background, you could make a png of the negative space and place it inside a div of the exact width and height of the image then just change the background color of the div on hover, since the actual logo is transparent you would see the background color of the parent div.
as you may opt for CSS sprites
http://css-tricks.com/css-sprites/
google for "css sprites generator" if you need a quick way ;)
If you are using flat png icons then you can use jFlat jquery plugin. Remember it only supports for HTML5 supported browsers
source : http://flaticon.sodhanalibrary.com/jFlat.html
I'm having some problems traying to place 3 images into a background, I mean, I have one image on top, actually a is 2000x550 pixels, then I need to leave 200px (vertical) and place another image that cover also the all the center and them one image into the footer.
Do you think that is better to make a full image a place it? full it's about 30KB. Or there is any way to place it using css?
Kind Regards
You should be able to achieve this with css z-index. See the following links for more information:
W3C Schools explanation of z-indexes:
http://www.w3schools.com/Css/pr_pos_z-index.asp
Indepth explanation of z-index's from Smashing Magazine:
http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
To answer the question of how to place the header image, the best way would be to define a div with a specified height (a 550px tall header seems awfully large to me, but hey, its your site) and width (probably set to 100%), and use the background-image css property to place the image there. This will prevent any side-scrolling.
A sample of the what you have going on to go with the sample images would be nice. From your description though it sounds like you have not implemented the z-index properly. My guess is that you need to declare the position of the divs you are adding a z-index to. Even if it is position:relative you still have to declare it or the z-index doesn't work.
-- Edit for real answer --
After looking at your images this is not actually that hard to implement. Here is how I would do it -
Set the background of BODY to white and the green/pink/gray background:
body{background:URL(images/green-pink-gray_bg.png) #fff no-repeat;}
Set the background of the DIV to the gray image -
div#gray{background:URL(images/gray_bg.png) #fff no-repeat;}
There is no need to set the z-index of anything since the div with the gray background is already "on top" of the BODY of the page. Using PNG images with transparent backgrounds will allow the white background to show through anywhere it is not covered by one of the background images.