I am using Font Awesome on a website.
I have a few custom icons and I would like to keep my code consistent, so I would like to use my new icons in the same way as Font-Awesome.
When I look at a font-awesome icon, it would seem that its content is set with the following CSS:
.icon-dashboard:before
{
content: "\f0e5";
}
And then the icon is created as follows:
<i class="icon-dashboard></i>
However, if I have a .png image and try to use it in the same way, it doesn't seem to work:
.icon-network:before
{
content: url("images/network-icon.png");
}
This just shows a blank image. What am I missing here?
Using an image in a pseudo element won't work without further stylng - it won't be given any space (hence you won't see it).
Something like this should work:
.icon-dashboard {
height: 1em; /* Fixed dimensions - scale with line height */
width: 1em;
position: relative; /* Required for inner 'absolute' positioning */
}
.icon-dashboard:before {
content: '';
height: 100%; /* Fill parent */
width: 100%;
position: absolute;
left: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("images/network-icon.png");
}
Things to be aware of when using raster images rather than fonts or SVGs:
Scaling/aliasing issues
Fixed colour
An alternative is to create your own font, which includes Font Awesome ones as well as your own - e.g. https://icomoon.io or https://fontastic.me
If it shows a blank image, that means your pathing is off. The path is relative to your CSS file. Check the properties in your browser of where the image is trying to pull from and that will help you diagnose the issue.
Related
CSS
.content {
background-image: url("Pics/GameLogoBackground.jpg");
width: 100%;
height: 600px;
position: absolute;
top: 0px;
left: 0px;
}
HTML
<div class="content" style="display:block;width:100%;height:600px">
I can't see the div background img, please help!
I have tried to solve the problem, with no success.
To reference a class, use the '.' prefix before "content" in the CSS.
So it would become:
.content {
...
}
EDIT:
As you now say the '.' was mistakenly missing from your CSS, some things to try:
Ensure that the file exists in the specified location.
Check that the div isn't behind anything else.
Check if file is present.Go to Your index page and try putting path to image into url. JPG and JPEG are not the same thing
Do not use just background-image , instead of that use for example : https://www.w3schools.com/cssref/css3_pr_background.asp
Also if you are not doing some CSS dark magic there is not reason to put CSS in tag and in style.
I checked Your code and it should be working. Problem is with Your picture. Try to pass more HTML code. There is a chance that some other DIV is covering it
I'm trying add a simple text watermark that I want to appear for each page that it will get printed on and look reasonable on Firefox, IE and Chrome.
I've gone through all the related threads that I could find and have applied the suggested answers, but to no avail. Either it appears fine on every page, but doesn't show on the first page (Firefox). Or it only appears on the first page (Chrome). Or doesn't show at all.
I was wondering, is there a standard way to do css watermarks that works for all browsers that I may have missed somehow?
For those curious as to what my html/css looks like at the moment:
<div class="watermark">This is a watermark!</div>
#media print {
.watermark {
display: inline;
position: fixed !important;
opacity: 0.25;
font-size: 3em;
width: 100%;
text-align: center;
z-index: 1000;
top:700x;
right:5px;
}
}
Any help is much appreciated!
Edit: This isn't just for watermarking images, otherwise as suggested I should use an image editor. This is for watermarking pages of document content (sections of text of various sizes).
The real problem is that you need a .watermark at the bottom of each printed page, but CSS has no concept of these printed pages.
The best you could probably do is to use the page-break-after CSS attribute to force a page break at certain points, then you could position your watermark just before that.
Something like (untested):
#media all {
.watermark {
display: none;
background-image: url(...);
float: right;
}
.pagebreak {
display: none;
}
}
#media print {
.watermark {
display: block;
}
.pagebreak {
display: block;
page-break-after: always;
}
}
<body>
some content for page 1...
<div class="watermark"></div>
<div class="pagebreak"></div>
some content for page 2...
<div class="watermark"></div>
<div class="pagebreak"></div>
</body>
Really I think those 2 classes could just be the same element, but this seemed more understandable in code.
The down side here of course is that you need to manually specify where each page break happens, and realistically, if someone prints your webpage on a 4"x6" notecard, its going to be radically different than standard size paper. But still, it's a step in the right direction.
You can't do this in css, simply because it won't work.
Think of this, the user just removes your css, gets your image URLs and copies the images, without the watermark. Right click 'save image url' will also bypass css.
There are two good ways to add watermarks that are fail-safe.
Edit the actual images
If you have control over the images, such as if you are building a photography portfolio, just batch process them in your image editor and add the watermarks before you upload them to the web.
This is a good idea because then your images are ready watermarked regardless of where you use them, so they're social media / promo pack ready etc.
Do it on request
Set up an .htaccess rule that intercepts any image requests and redirects them via some server side code that uses an image processing library to add the watermark and return the binary image data. You can cache a watermarked image with a hash code and check for a watermarked version existing first that will allow you to bypass the processing.
This means that any image request, regardless of whether it comes from css, HTML, or a direct URL will serve a watermarked image. Do use some logic to skip any images used for the decoration of your site, otherwise you'll get watermarked in unexpected places!
The advantage here is that the original image is untouched, if you update your watermark, perhaps as part of a rebranding, you won't need to update all your images.
Another advantage of this approach is that you can apply it to any images, even if you don't create them - for example, if you have users uploading images to your site. Care should be taken with this however, before you watermark, make sure you have the right to watermark the image.
issue reason.
print not support background-image.
This is my solution.
1.Absoluted position for Main elements(need to print div).
2.add element
<style>
.mainContend{
position: absolute;
top: 0;
}
.watermark{
opacity: .8;
}
</style>
<script>
var addWatermark = function () {
var bodHeight = document.body.scrollHeight;
//imge size is 1000*400px
var imgNum = Math.floor(bodHeight/400) ;
var template = '<img src="../img/icon/watermark.png" class="watermark">';
var innerHTML;
//create image number
for(var i = 0;i < imgNum;i++){
innerHTML +=template;
}
// innerHTML.appendTo("#reportContent);
$("#reportContent").append(innerHTML);
}
window.onload = addWatermark;
</script>
<div id="reportContent">
<div class="mainContend" id="mainContend">
content reportContentreportContentreportContent
</div>
</div>
Here is how I successfully managed to use watermark on every page in print preview
HTML:
<!-- place this only once in page -->
<div style="opacity: .5; filter: alpha(opacity=50);" class="watermark"></div>
<!-- place this in your table thead -->
<div style="opacity: .5; filter: alpha(opacity=50);" class="watermark_print"></div>
CSS:
div.watermark_print{
display: none;
width: 100%;
height: 100%;
background: url("{{{watermark}}}") no-repeat;
background-position: center;
z-index: 99999999;
border: none !important;
background-size: 400px !important;
}
div.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("{{{watermark}}}") no-repeat;
background-position: center;
z-index: 99999999;
border: none !important;
background-size: 400px !important;
}
table {
width: 100%;
table-layout: fixed;
border-spacing: 0;
}
#media print {
div.watermark {
display: none;
}
div.watermark_print {
display: block;
position: fixed;
inset: 0;
}
}
That should do the trick, we have two watermark, one in HTML page review and another hidden in normal view but in print preview, we show it and because we are repeating table header in every page so we have this watermark on every page.
.responsive td.head1:before {
content: url(myimage.png )
}
I want to put an image into a responsive table column (I'm using this to put the column titles as rows in a similar manner described at CSS Tricks here. The difference is that my 'headings' contain images. Those images need to be rescaled to fit, and I seem to be drawing a blank using such things as background-size. So is there any way to rescale/resize the image?
Update: Thanks for your suggestions about using a background-image - you get bonus points if someone can tell me a way of getting an image in a :before segment with an alt/description tag for disability compliance.
You can give the class a background image and style it. Try this...
name{
background-image:url("url here");
background-size:80px 60px;
}
Append a background image to this item, like here: http://jsfiddle.net/4rB5X/1/
.responsive th:nth-child(1):before {
content: "";
position: relative;
display: inline-block;
width: 30px;
height: 30px;
background-image: url(http://www.placehold.it/30x30);
background-repeat: no-repeat;
background-position: top left;
vertical-align: middle;
}
th
{
vertical-align: middle;
}
To address your question with the alt Tag for these images:
You may indeed use content for an pseudo alt-tag. You can use an attribute to define the desired text. Here is an exampe:
http://jsfiddle.net/4rB5X/2/
CSS
/* Puts the data-img-alt value of the <th> as content */
.responsive th:nth-child(1):before {
content: attr(data-img-alt);
}
/* Hide Text from content */
th.hide-text:before
{
text-indent: -99999px;
overflow: hidden;
text-align: left;
}
HTML
<thead>
<th class="hide-text" data-img-alt="Lalala">Test</th>
<th>Test</th>
</thead>
Update:
Like #vogomatix pointet out, the content property must not be null, but at least an empty string (content:""; would be ok). To have a workaround, try this:
th:before
{
content: "";
}
th[data-img-alt]:before
{
content: attr(data-img-alt);
}
I have an anchor that changes its background image when hovered with a class class-btn that contains a background-image.
When hovered, it has
a.class-btn:hover
{
background-image('path/to/image-hovered.jpg');
}
When the page loads the first time and you hover this button the first time, it blinks (it takes about half a second to download the hovered image). How to avoid that blinking without JavaScript (only simple css and html is allowed)?
I tried to search Stack Overflow for the similar question, but with no luck.
Just added:
Should I "preload" the hovered image? How?
Should I play with z-index or opacity?
It happens with all browsers and thus the solution should work for all browsers.
Here is a simple and effective css image preloading technique I have used several times.
You can load several images by placing content: url() url() url()... etc.
body:after {
display: none;
content: url('path/to/image-hovered.jpg') url('path/to/another-image-hovered.jpg');
}
The easiest way to avoid this is to make use of image sprites. For a good overview, check out this CSS Tricks article.
That way, you not only solve the flicker problem you're seeing, but will also reduce the number of HTTP requests. Your CSS will look something like:
a.class-btn { background: url('path/to/image.jpg') 0 0 no-repeat; }
a.class-btn:hover { background-position: 0 -40px; }
The specifics will depend on your images. You can also make use of an online sprite generator to make the process easier.
A simple trick I use is to double up the original background image making sure to put the hovered image first
.next {
background: url(../images/next-hover.png) center center no-repeat;
background: url(../images/next.png) center center no-repeat;
&:hover{
background: url(../images/next-hover.png) center center no-repeat;
}
}
No performance hit and very simple
Or if you're not using SCSS yet:
.next {
background: url(../images/next-hover.png) center center no-repeat;
background: url(../images/next.png) center center no-repeat;
}
.next:hover{
background: url(../images/next-hover.png) center center no-repeat;
}
If you do this:
#the-button {
background-image: url('images/img.gif');
}
#the-button:before {
content: url('images/animated-img.gif');
width:0;
height:0;
visibility:hidden;
}
#the-button:hover {
background-image: url('images/animated-img.gif');
}
This will really help!
See here:
http://particle-in-a-box.com/blog-post/pre-load-hover-images-css-only
P.S - not my work but a solution I found :)
#Kristian's method of applying hidden 'content: url()' after the body didn't seem to work in Firefox 48.0 (OS X).
However, changing "display: none;" to something like:
body:after {
position: absolute; overflow: hidden; left: -50000px;
content: url(/path/to/picture-1.jpg) url(/path/to/picture-2.jpg);
}
... did the trick for me. Perhaps Firefox won't load hidden images, or maybe it's related to rendering(?).
You can preload images
function preloadImages(srcs, imgs, callback) {
var img;
var remaining = srcs.length;
for (var i = 0; i < srcs.length; i++) {
img = new Image();
img.onload = function() {
--remaining;
if (remaining <= 0) {
callback();
}
};
img.src = srcs[i];
imgs.push(img);
}
}
// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];
var images = [];
preloadImages(imageSrcs, images, myFunction);
This is a non-CSS solution: if the hover images are in one directory and have a common naming convention, for example contain a substring '-on.', it is possible to select the file names and put it into the HTML as a series of:
<img src='...' style='display: none' />
If they are the same dimensions, one possibility is to draw the two images directly on top of each other, with the CSS :hover class for the top image having display: none;
This way both images will be preloaded, but hovering will make the second visible.
The "double up the original background image" trick didn't work for me so I used another css trick:
.next {
background: url(../images/next.png) center center no-repeat;
}
.next:hover {
background: url(../images/next-hover.png) center center no-repeat;
}
.next:after {
content: url(../images/next-hover.png);
display: none;
}
This technique works nicely for me and ensures not only is the hover image pre-loaded, but it's also ready and waiting to be displayed. (Most other solutions rely on switching the background image on hover, which just seems to take the browser a bit of time to figure out, however much the image is pre-loaded.)
Create :before and :after pseudo elements on the container with the two images, but hide the one you want to see on hover. Then, on hover, switch the visibility.
So long as they both share the same size and positioning rules, you should see a neat swap.
.image-container {
&:before { display: block; background-image: url(uncovered.png); }
&:after { display: none; background-image: url(uncovered.png); }
}
.image-container:hover {
&:before { display: none; }
&:after { display: block; }
}
I had the same issue.
After trying everything related with css i can not solve the problem.
What finally solved the problem was simulating that someone hovers the element.
The css is the normal one.
CSS
#elemName{
/* ... */
}
#elemName:hover{
/* change bg image */
}
JS
var element = document.getElementById('elemName');
var event = new MouseEvent('mouseover', {
'view': window,
'bubbles': true,
'cancelable': true
});
element.dispatchEvent(event);
Just change the size of the background image, instead of the source of it! So...
a.class-btn {
background-image: url('path/to/image-hovered.jpg');
background-size: 0;
}
a.class-btn:hover {
background-size: auto;
}
The best way to do this is to just insert the images onto the webpage and set display to none.
Does anyone know how can I control the image source from the CSS?
I need to be able to change the image src from the CSS. I have loop printing < img id=.. > tags, and for every id it different image. I want to be able to set the source by its id from the style css area.
Does anyone know how to do this?
This is not possible: The image's source is part of the markup, not CSS.
The only workaround would be having div elements with background-image properties instead. Those you could set from within the style sheet:
<div id="image1"></div>
#image1 { width: 100px; height: 50px; background-image: url(image.gif); }
However, with this method you lose all the img tag's advantages like
The ability to set an alt text
Resizing
Printing (most browsers don't print background images)
Search engine indexing (probably)
the only other alternative is by using JavaScript, but that obviously won't work if JavaScript is disabled, which makes it a no-no in my view.
This is now possible with CSS3 using the Content style.
I use this to swap images within a slider based on window size through media queries.
Edit: When I originally posted this, I was unaware that it only worked in Webkit at the moment. But I doubt it will take long before it gains more functionality across browsers.
HTML
<img class="img1" src="image.jpg">
CSS
#media (min-width: 768px) {
.img1 {
content: url(image.jpg);
}
}
#media (max-width: 767px){
.img1 {
content: url(new-image.jpg);
}
}
That is not possible with CSS.
However, this is very easy with Javascript:
document.getElementById("IdOfImage").src = "SourceOfImage";
You cannot really do that, however, if you do need to do that using CSS, you can do it for two images with the same size like this:
<style>
img {
width:0;
height:0;
display:block;
background: url('2.png') no-repeat bottom left;
padding-left:196px;
padding-bottom:187px;
}
</style>
<img src="1.png">
Only tested it in FF3.6 though.
I found this article that might be useful. It actually changes background of an image
here is the example in case website goes missing:
HTML
<html>
<body>
<div class="header">
<img class="banner" src="http://notrealdomain1.com/banner.png">
</div>
</body>
</html>
CSS
/* All in one selector */
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
If you don't want to use backgrounds nor use javascript, you layer 2 images with different src on top of each other (using absolute positioning) and use CSS to hide one or another. Visually it will be the same then changing the src.