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.
Related
I'm working right now on a CMS called TYPO3 v.10 , this CMS is pretty complicated to me.
I have an image and a css-file, I can't give the image a class or an id, I can give the image basically nothing, it's just there and i have to style it.
So my question here is:
How can I style the image without giving it a class or an Id or anything else?(maybe using the source or something like that?)
I've used the img tag in css, but I've changed every single image in the whole CMS.
/* not desired as it effects all images */
img {
width: 100;
height: 100;
}
<div>my missing HTML here</div>
You can select an image by using its parent. For example .image-container img, which will target all the images within the parent, or use .image-container > img, which will target only image within the parent, but not images that are within children.
If your images dont have a parent, you can select them using body element and nth-of-type() selector. For example body img:nth-of-type(2) to target second img withint the body
Can you perhaps find a specific container(s)? If so, you can add a style to that. E.g.
section header .containername img {
}
If not, perhaps you can try other selectors. There are so many e.g. https://www.w3schools.com/cssref/css_selectors.php
If that doesn't work, perhaps you can use javascript to add a class to the specific image, it's container or anything near it.
You're correct, you should be able to target the image using its source URL and the CSS attribute selector:
img[src="img/url.png"] {
/* styles */
}
You can also use *="value" instead of ="value" to select any image whose source contains (but is not necessarily equal to) value.
Read more about attribute selectors on MDN Web Docs.
Are there multiple images on your webpage? If there is only one, you can add styling to the img tag in CSS:
img {
width: 100px;
height: 100px;
border: 1px solid black;
}
You can add CSS to the image by calling the parent class in which you used the "img" tag.
Check the provided attachment!
body .parent-class img { width: 100px; height: 100px;}
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.
I have a global rule for anchor tags in my document:
a,a:hover {border-bottom: 1px solid #ccc;}
But the border doesn't look good on images. I was curious if there's a way to remove the border of an anchor tag that contains an image only using pure css?
I found this: http://konstruktors.com/blog/web-development/1122-remove-border-from-image-links/
It basically is a very simple hack that looks like this:
a img { border:none; vertical-align:top; }
It works like a charm and has no browser-conflicts: See article for more details.
EDIT: The border:none doesn't actually do anything useful in most circumstances. The border is on the anchor, not the img tag, so if you've already zeroed out the border on anchored images with a global CSS reset, you'll only need vertical-align:top to push the a's border up and behind the image so it's no longer visible (as long as your image is opaque).
No, there is currently no selector in CSS that would select elements on the basis of their descendants. You would need to use JavaScript or classes in CSS.
Most robustly, you would use a class attribute on all links that do not contain an image and use a corresponding class selector in your CSS rule.
If most of your links do not contain an image, you could use negative approach and set a class on those links that contain an image, say class=imagelink, and use a :not(.imagelink) selector in CSS. Support to :not(...) is widespread but not universal. A yet another approach, not counting on such support, is to set a bottom border on all links as in your question and then switch it off for image links:
a.imagelink {border-bottom: none;}
Not possible, unfortunately! I guess I've only done this using jquery.
http://www.w3schools.com/cssref/css_selectors.asp
Complex CSS selector for parent of active child
Is there a CSS parent selector?
It's not possible using cssbut you can do it using css if you add cssParentSelector.js script which uses jQuery. Here is an example
a! > img { border: none; }
above css rule removes the border from the a tag if it's the parent of an img tag, but still now it's not pure css, has dependendencies.
The vertical-align trick only works [well] with non-transparent images, and doesn't work at all if the a line-height is greater than the image height (think small social networking icons).
I wish I could use the accepted solution here, but it throws off alignment of inline images within text blocks, along with the issues above.
I've settled for doing a solid white box-shadow on the bottom of a > img, maybe a backup filter shadow for IE8 and older, and calling it a day. Doesn't mess with the layout:
a { text-underline: none;
border-bottom: 1px solid blue; }
a img { box-shadow: 0 .333em 0 0 white; /* white, or your background color */
filter: progid:DXImageTransform.Microsoft.Shadow... etc }
As said by other answers to your question, it's not possible do it with CSS by now. But if you use jQuery, this work great:
$(document).ready(function(){
$('a img').parent().css('border','none');
});
It basically after the page is loaded search the links containing an image and state the css rule border:none; for the parent element of the image, ie. the link.
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
Why on earth does the IMG element have the CSS color property?
After playing around in Firebug for 20 minutes, I couldn't figure out how it could be used.
It will color the alt text when a picture fails to load: demo.
IMG is no different than any other inline element. For instance, in most browsers, the color attribute sets the color of the alt text while the image is loading or when it can't otherwise be rendered.
<style>
img {
color: #f00;
width: 50px;
height: 50px;
background-color: #000;
position: absolute;
}
img:after {
content: "asdf";
}
<style>
<img />
asdf is red. (on Firefox, tested with firebug on this very page.)
Anyways, I'm pretty sure the CSS standard doesn't bind particular CSS rules to particular HTML tag elements.
Every element has every property, though some properties do not “apply to”, i.e. cannot have effect on, some elements (see clause Applies to in the CSS spec.). So the question is really this: Under which circumstances could the color property affect the rendering of an img element? As described in other answers, it could affect the rendering of alternative text or generated content. (In old browsers, though, alt text may be rendered using fixed routines that are immune to CSS rules.)