I have a sprite image. I want to displayed just one icon from there. How can that be displayed using jsf/primefaces?
I tried the following code but the complete image is getting displayed.
<p:graphicImage value="/resources/images/image.png" styleClass="lockedImage"/>
.lockedImage{
background-position: -110px -98px;
}
The <p:graphicImage> generates a HTML <img> element. You shouldn't be displaying the sprite file as a whole image via <img>. You should be using the sprite as background image of a block level element such as <div>.
E.g.
<div class="lockedImage" />
with
.lockedImage {
width: 16px; /* Set this to icon width. */
height: 16px; /* Set this to icon height. */
background-image: url(#{resource['images/image.png']});
background-position: -110px 98px;
}
(note: #{resource} in CSS works only if you're using <h:outputStylesheet> to serve the CSS file as JSF resource, otherwise you've to hardcode the right path yourself)
Note that this problem is completely unrelated to JSF. It's just basic HTML/CSS. JSF is in the context of this question merely a HTML/CSS code generator. I strongly recommend to take a JSF pause and learn basic HTML/CSS in order to better understand JSF. If necessary, you can generate a <div> using <h:panelGroup layout="block"> in JSF.
Related
I want to add a link in pure CSS.
Tried to add the url in background as the code below. Unfortunately, it does not work.
.fa-home:before {
font-size: 2rem;
vertical-align: middle;
padding-right: 0.5rem;
background: url(https://example.com);
}
The icon looks like:
Is any ways to achieve this just using CSS? (Assume having no access to the control of HTML and JS.)
There is no way to do it using CSS.
CSS - Cascading Style Sheets. It describes how HTML elements are to be displayed on screen, paper, or in other media. In simple words - HTML creates elements like images, links and CSS add a style.
Using url in background is similar to src="" attribute in img tag. You provide the url to the image you want to use as background image.
On developing a site with full-sized background images (using the cover attribute) I want to supply an additional image in a hidden image tag that appears on print and maybe for accessibility readers.
Right now, I just supply a separate print CSS displaying the image and overriding the background element.
Is there a common solution (maybe involving an ARIA tag) that could be applied?
Also: I shouldn't care about performance implications because the same ressource is re-used, right? See: Ressource gets only loaded once
See:
Codepen Example
The accessibility requirement for images is to add the text that is in the image in TEXT in the document, not to add another image. What you should be doing is adding a span element with the hidden class and a text of "960 by 540". You should also change the hidden class to:
.hidden {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
So that the screen reader will still pick it up
I'm putting this in a widget in WordPress:
<div style="background-image: url('http://www.domain.net/img/subscribe.png');
background-repeat: no-repeat;"> </div>
But the result is this:
When I want the result to be this:
So it's barely showing the top of the background image I want. How can I achieve getting the full image -- but of course I don't want it to repeat x, or repeat y? And should I be using div tags, or something else? Any guidance in this regard would be appreciated!
Set that div's width/height to the same size as the background image. I would recommend something like this:
HTML
<div class="newsletter-subscribe">
<!-- any additional content can go here, like a <form> for example -->
</div>
CSS
.newsletter-subscribe {
background-image: url('http://www.domain.net/img/subscribe.png');
background-repeat: no-repeat;
background-position: top left;
width: 400px; /* whatever the picture width is */
height: 300px; /* whatever the picture height is */
}
The reason why you'd put this in a stylesheet, instead of inline, is so that you can more easily apply other styles to your container (ie div.newsletter-subscribe), as well as make changes in your stylesheet - instead of in template and/or partial files. Styles are much easier to maintain in a stylesheet than inline.
I'm adding icon with Twitter Bootstrap without problem. They have a lot of alternatives.
http://twitter.github.com/bootstrap/base-css.html#icons
However, I couldn't find appropriate icon for one of menu item. It is about "car".
What I want is I would like to add my custom icon. How can I do this?
You can create your own icon by defining it in your own class like s:
.icon-car {
background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png");
background-position: center center;
}
Keeping in mind of course to use the prefix .icon-* since it is targetted by an attribute selector set by the bootstrap to apply all styles (widh/height/line-height etc...).
Just try to keep to the same width and height as the original icons (14x14), this way you won't have to define your own width and height and it won't mess with the line-height of your elements. Here is a demo with such a case: http://jsfiddle.net/RwFeu/
Here's what we do, so that all the icons are in a single sprite file and you can allow arbitrary sized icons.
create a CSS file like
[class^="icon-custom-"],
[class*=" icon-custom-"] {
background-image: url("https://app.10000ft.com/images/compSpritesButtonsIcons.png?8");
}
.icon-custom-logo { background-position : -530px -700px; width : 142px; height : 158px; }
.icon-custom-intheoffice { background-position: -395px -60px; width: 24px; height: 24px }
And then in your markup,
<i class="icon-search"></i> a standard bootstrap icon
<i class="icon-custom-intheoffice"></i> a custom icon, using our own sprite file.
<i class="icon-custom-logo"></i> a logo, an even bigger sprite icon
<!-- spritefile from www.10000ft.com. not for reuse, please -->
Note that this assumes a single sprites file that contains all the icons. If you have multiple sprite files, the background-image needs to be set for each icon, accordingly.
JSFiddle at http://jsfiddle.net/shyamh/cvHdt/
This solution is based on the example posted by Kevin
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