I have a sprite map. In that sprite map there is 1x1px fragment that I need to use to create a background for an element (i.e. repeated).
Does CSS alone provide a solution for that? I am interested even if it is futuristic and will work only in IE12. For those who don't know what a sprite map is, I've attached an example.
https://static.anuary.com/9429dc4e7a395b6443ae58919f1416523a9a798dd54931cb0e5ed70c582766a4/public/images/sprite.png.
I don't know of a particular method that will let you clip a portion of an image to tile it as the background of an element. Since you only have a 1px x 1px fragment, why don't you use the standard background-color property or keep a separate graphic for this purpose? I prefer the background-color CSS property since you seem to be dealing with a solid color.
You can also go to CSS3.info to see what's coming.
You can try using CSS before or after pseudo elements instead of using placeholder tags
.icon::after {
position:relative;
display:inline-block;
overflow:hidden;
content:" ";
width:21px;
height:24px;
background:url(images/icons.png) -1000px -1000px no-repeat;
}
.icon::after {
background-position: -14px -24px;
}
Related
I have a sprite that I want to use defining a class to and not an id:
I want to use the white one to show expansion option and black one to show expanded state. For non expanded state I have a class sprite-right and want to use sprite-expanded for expanded state. Can anyone guide me through this? I forgot pasting what I did...duh!
sprite-right
{
overflow:hidden;
width:16px;
height:20px;
cursor:pointer;
background:transparent no-repeat 0 0;
background-image:url('../images/arrows.gif');
}
It's pretty simple to set up. You first need to set a class for applying the image as a background. Then add specific classes for each icon. Then in your CSS you change the background position, height and width to match the location of each icon. Here is an example:
.icon {
background-image: url('path/to/image.png');
display: block;
}
.icon.sprite-right {
background-position: 0 0;
height: 10px; // You can change these for each sprite
width: 10px; // You can change these for each sprite
}
.icon.sprite-expanded {
background-position: -10px 0;
}
.icon.sprite-right:hover {
background-position: -20px 0;
}
.icon.sprite-expanded:hover {
background-position: -30px 0;
}
Then, as you add new sprites you simply adjust the position until you can see the icon and then adjust the height and width until you are not clipping the image.
There are many great tutorials out there if you do a Google search. I use this tool alot when dealing with simple sprites.
Check out this link: http://labs.engageinteractive.co.uk/nav-o-matic/
Here is a codepen I forked so I can understand sprites a little better.
http://codepen.io/daugaard47/pen/lntzE
Study the code and it will start making sense to you.
Use background positioning to move your sprites to the desired class/state.
Hope this helps a little.
This post should help : http://mindthesemicolon.com/using-css-sprites/
It explains how to create and use sprites, with a code pen example.
I'm new to CSS and I'm trying out image spriting in CSS. I have an sprite map at present. There are multiple CSS files which are cascaded from my main CSS using #import. Each of these CSS files defines the layout for various components. I need only one call to be made to my sprite image hence I need to play around with background-position.
Could anyone tell me a way such that I make only one call to my image and the rest of the CSS files just manipulate the position?
You will need to work with multiple classes.
In the first class (lets call it .sprite) you have to define the background-image.
.sprite {
background: transparent url(path/to/image) no-repeat 0 0;
height: 16px;
width: 16px; //assuming you are using this size for your icons...
}
Now you will have to define another class for every sprite image you will be using.
For example, you have an magnifier-icon, you will add a class .sprite .magnifier and there you will have to define your background-position.
.sprite.magnifier {
background-position: 45px 30px;
}
Now in your HTML you just call for <div class="sprite magnifier"></div> and your image will just one time loaded.
There are various sprite generators. Or you can create your own using some kind of image manipulation software.
You'll want to save all the images in one layout as a .png (generally) with sufficient spacing between elements.
Then depending on your individual needs you can set the background of say all elements, to be your sprite, but this would potentially cause problems.
It's far better to say ~
ul.foo li {
background:url(my-sprite.png);
}
ul.foo li.home {
background-position:0 10px;
}
ul.foo li.about {
background-position:10px 20px;
}
and style individual elements as required. The sprite will still be only loaded once.
You should not use sprites for lots of large images either - best suited for icons, buttons etc. See YouTube, Google, Stack Overflow for good examples.
Give your elements the same class of sprite then override them:
.sprite { background: transparent url(../images/sprite.png) no-repeat top left; }
.add_icon { background-position: 20px 60px; }
.next_icon { background-position: 40px 60px; }
<div class="sprite add_icon"> etc.
and so on..
Is it possible to use CSS sprites for "foreground" images -- i.e. images that users are supposed to click on and interact with and maybe even print?
Instead of using the CSS background-image property. What would you use?
You can use a standard <img /> tag and put it in a container (like a <div />) with a limited height/width. Then use relative positioning or negative margins to control the position of the image.
I have solved this problem using img tags and using the object-fit and object-position properties in my css. Here's a sample of the html and css I used:-
HTML
<img src="<your image source>" class="sprite-icon sprite-icon-1 " />
CSS
.sprite-icon {
height: 20px;
width: 20px;
object-fit: none;
}
.sprite-icon-1 {
object-position: 0 0;
}
.sprite-icon-2 {
object-position: -20px 0;
}
Obviously, you need to change the position and the size parameters according to the sprite you are using. For a full working example, check out this fiddle
You can do this with less CSS like this:
.myClass { background: url(../Images/Sprite.png) no-repeat;
height: 20px;
width: 40px;
background-position: -40px 0;
display: block; }
.myClass:hover { background-position: -40px -20px; }
Whatever has the class class="myClass" will have just the image in it, nothing else. This can be a <a> an <input> or a normal <div>, whatever you want.
It's a background image...but it's the element you're looking at, nothing's in front of that background. Just because you're using background-image for the property doesn't mean it's not a foreground element...like a button you can click on. You can do that like this:
<input type="button" class="myClass" />
One primary requirement that cannot be handled by background images is for ARIA. All ARIA requirements will reject the use of background images for meaningful, navigational, and other 'informative' uses that a screen reader must interpret on behalf of a user with a disability. Being able to swap out a background image css statement for an img tag and some ARIA tagging whenever necessary is a critical feature in the current regulated development environment.
The answer to the original question is yes! It is possible to use the image that is displayed in a css background statement. But you must open the sprite image in an image editor and select out the portion that represents the sprite you want and save it as a separate image and reference it in an img tag.
The challenge is that often, these situations arise in a pre-built control library. Finding and altering the code in the library that selects and displays the background image is a little difficult, changing out the code is hard!
#Waughwaugh's answer https://stackoverflow.com/a/50715682/2733244 using object-fit and object-position is a simple and solid solution for this problem. Its only downside is that it won't support some older browsers. If you still need to target IE11 you can instead work with clip-path and negative margins:
.sprite {
width: 240px;
height: 20px;
}
.sprite-1 {
clip-path: polygon(60px 0, 80px 0, 80px 20px, 60px 20px);
margin-left: -60px;
margin-right: -160px;
}
Full demo: https://jsfiddle.net/wortwart/8omfcyxb/10/
Using "real" images instead of background is often semantically better (e.g. for icons) and can have benefits for accessibility: If the image has not loaded or was blocked by the user we still have <img>'s built-in alt description. Accessibility is more than just screenreaders ...
The best approach of course is to ditch CSS sprites and simply load the images separately with HTTP/2.
You can do this, but you have to use background images for sprites as you have to be able to set position. This can be used for links or whatever you want. Look at Googles sprite, they use it for there buttons on iGoogle: http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif
I want to set the border of a table to be "1px solid black" except on the bottom, where I want to use an image which provides a pointer into the link - as a visual aid.
Is it possible to set an image as the bottom border when the other borders are regular css.
Try putting the table inside <div class="myTableContainer"></div> and then:
.myTableContainer{
padding-bottom: 1px;
background: url(myBorderImage.png) bottom left;
}
This should work well across all browsers.
CSS3 has added support for border-image. You can find more information at http://www.w3.org/TR/css3-background/#border-images. At this point (early 2012), it's probably not safe to use due to lack of support in all versions of IE. To track when it is safe to use you can visit http://caniuse.com/#search=border-image. One way to simulate the border-image style is to use a positioned background-image. For example, to simulate a top border:
div
{
background-image: url('topBorder.gif');
background-position: top;
background-repeat: repeat-x;
}
I don't think so. You're probably better off adding a <DIV> below the table, give it a black border, a fixed background, and some fixed padding or whatnot (to give it some size).
One solution is to style your element with a background image in css and then specify an offset for the background in CSS. The background can poke out from beyond the edge of the element (a div or li element for example). This can be used for many different effects, one being the appearance of a drop shadow using pure css.
Some specifics here:
http://www.alistapart.com/articles/cssdropshadows/
Now there is CSS3 and a border-image property for that, but still it does not work for all browsers.
OK, let's there be a W3Schools link on this topic.
No. Why don't you try another table row for that purpose?
Try putting a below your table then set his style like
.bottomborder {
height:1px;
background-image:url("yourImage.png");
}
Should work good.
Edit : and of course border-top, left, right for your table a "solid 1px black"
You can set the borders like that except the bottom border :
border-top:1px solid black;
border-right:1px solid black;
border-left:1px solid black;
For the bottom border, you can set your image as background of a row maybe.
I am familiar with CSS techniques to replace text with an image. For example, here are 9 of them: http://css-tricks.com/nine-techniques-for-css-image-replacement/
Are there any techniques for replacing images? Is there anyway to set the background of an image to an image and then hide or move the foreground of the image (the image src element).
I am trying to write a skin for a site that has an image that I want to replace. Thanks.
From how I understand it he's trying to do this in pure CSS, with no changes to HTML or JavaScript.
That is correct. I am adding a new stylesheet to an existing page. Let say I can not modify HTML or utilize javascript.
After a little bit of tinkering, I figured it out!
img.someclass {
background: url("NEW IMAGE URL") top right;
height: 0;
width: 0;
padding: 200px 550px 0 0; /* Insert actual image size (height width 0 0) */
}
This will make the height and width of the actual image 0, but will expand the box to fill the size of the image with padding. The only downside to this is it won't look perfect in older versions of Internet Explorer.
If you have an element surrounding the image, e.g. a DIV, you should be able to set a background image (along with no-repeat and a position) on it, then set the image to display:none.
Alternatively, here's a haphazard solution that seems to work. It positions the image off-screen, then uses the :after pseudo-element to set a background image. It should be workable, but you'll need to fiddle with the values to get it working right. It won't work in IE6 though.
<style>
img.test {
background: url('image_to_show.png') no-repeat right top;
position: relative;
left: -16000px;
}
img.test:after {
content: ".";
color: transparent;
display: block;
width: 16000px;
}
</style>
<img class="test" src="image_to_hide.png">
The best way to replace images is to set the background position. First create the two different images and put them one above the other in the same image. Say your skin element is 50x50 pixels, you'd create a 50x100 image.
Then use some code like this:
.skinElement1 {
background: #fff url("image.png") no-repeat 0 0;
}
.skinElement2 {
background: #fff url("image.png") no-repeat 0 -50px;
}
So to view the second image you move the background up by the required amount. You could either use javascript or your server-side code to set the appropriate class.
Maybe you can set an opacity of an element and then set the background to the image you want.
Musicfreak: I meant using TWO elements.
you will have assign different classes for the two states then write some javascript to have the image change upon an event.
for example:
.firsImage { background:transparent url(/images/someImage.jpg) no-repeat; }
.secondIMage { background:transparent url(/images/image2.jpg) no-repeat; }
HTML:
<div id="imageDiv" class="firstImage"> some content </div>
<a onclick="changeImage()">Change the image!</a>
Javascript:
function changeImage(){
var imageDiv = document.getElementById("imageDiv")
if ( imageDiv.className === "firsImage" )
document.getElementById("imageDiv").className = "secondImage"
else
document.getElementById("imageDiv").className = "firstImage"
}