I have 31 icons of a calendar one for each day of the month and my css looks not as good as I would like. Right now I've:
.icon-agenda.day-1, .icon-agenda.day-1:before{
background: url(../images/tiles/agenda/1.png) no-repeat;
}
.icon-agenda.day-2, .icon-agenda.day-2:before{
background: url(../images/tiles/agenda/2.png) no-repeat;
}
.icon-agenda.day-3, .icon-agenda.day-3:before{
background: url(../images/tiles/agenda/3.png) no-repeat;
}
.icon-agenda.day-4, .icon-agenda.day-4:before{
background: url(../images/tiles/agenda/4.png) no-repeat;
}
...
.icon-agenda.day-31, .icon-agenda.day-31:before{
background: url(../images/tiles/agenda/31.png) no-repeat;
}
I would like to replace the above code with something more simple like
.icon-agenda.day-xxx, .icon-agenda.day-xxx:before{
background: url(../images/tiles/agenda/xxx.png) no-repeat;
}
Can I do something like this in CSS?
There's no way (yet) to do this in native CSS. You could use a preprocessor like LESS, but that would generate the same output, only with the added hassle of compiling it, so your current method is the most optimal one as far as this layout goes.
One possible optimization could be to create an entire sprite from all of the images, set it as a background-image for all items with 1 selector like [class*=".icon-agenda.day-"], [class*=".icon-agenda.day-"]:before, and alter the background-position of the separate elements. This would save you requests meaning a faster page load.
As per your comment about using JavaScript, here's a solution that will add an extra <style> tag to the <head> of the page with your CSS:
var styl = document.createElement('style');
for (var i=1; i<=31; i++)
styl.innerHTML += '.icon-agenda.day-'+i+',.icon-agenda.day-'+i+':before{background:url(../images/tiles/agenda/'+i+'.png) no-repeat}';
document.head.appendChild(styl);
At some point in the future, you will be able to do
background-image: attr(data-png url);
which would take the URL from the data-png attribute of each element.
Right now it only works with the content CSS property.
See https://developer.mozilla.org/en-US/docs/Web/CSS/attr.
Related
The goal is is to set a fallback image in pure CSS, without using the image() notation. Otherwise, the goal would be this code:
#some-id{
background-image: image('default-image.png', 'fallback-image.png');
}
Indeed, in the context rising this question, the written CSS is processed and the follwing code :
#some-id{
background-image: /*#var default-image */;
}
will return:
#some-id{
background-image: url('/URL/TO/default-image.png');
}
As it is, there is no way to pass more than one parameter to this preprocessor.
One already explored idea would be to set immediately after the same id which have a background-image set to none. Indeed, the preprocessor do return none when there is no matching picture. So, in code:
#some-id{
background-image: /*#var default-image */;
}
#some-id[background-image=none]{
background-image: /*#var fallback-image */;
}
Unfortunately, it seems that it doesn't work.
You can use:
background-image: url("image.png"), url("fallback-image.png");
It will superimpose pictures and so you can play with the images transparency or no to get the expected result.
#some-id {
background-image: url('fallback-image.png');
background-image: image('default-image.png');
}
I'm working on Sencha touch application.
I have created list view using Ext.list component of sencha touch.
I have set background images for all list item using CSS
.x-list .x-list-item {
position: absolute !important;
left: 0;
top: 0;
width: 100%;
height:20px;
background: url('../images/list_1.png');
background-repeat: no-repeat;
background-size: 97% 98%;
}
Now I want to set different images for different list items. Is this possible?
If you are using tpl to generate your list items, simply give your list items a class name, something like:
tpl: '<div class="{bgimage}">This is list item 1.</div>'
then change the bgimage property of the data that you set to the list, something like this should do:
prepareData: function(data, index, record) {
data.bgimage = "bg-" + index;
}
Then in your CSS/SASS, you can do
.x-list-item.bg-1 {
background-image: url('../images/list_1.png')
}
.x-list-item.bg-2 {
background-image: url('../images/list_2.png')
}
…
You could customise this to your needs, but this should get you started.
If you're using list item components (i.e. your list does not have a tpl config but an itemCmp config), just set the cls config on each item to get the same result.
If targeting them using nth-child is not working you might have to go the more cumbersome route and attach a separate class to each list item in the html and then manipulate their background images in the CSS by changing the background property of each individually
I am having list of css files and every css file has different image location code written like url(../_images/headerImages.jpg), now I am placing my images to some other domain therefore I want to create a variable like var domainPath = http://sitename.com so that at every url(../) I could write something like url(domainPath+ '/images/headerImages.jpg').
Example
var DOMAIN_PATH = http://www.mysite.com;
#header {background: url(DOMAIN_PATH/_images/headerimage.jpg)no-repeat; }
Please help me..
You cannot use variables in plain CSS. I suggest using a CSS preprocessor which is a language that compiled to CSS. SASS is fantastic and you can do what you ask like so:
$domainpath: url(http://www.mysite.com/_images/bg-header-noodletools-express.jpg);
#header {background: $domainpath no-repeat; }
Another alternative is LESS.
As mentioned in https://ishadeed.com/article/css-vars-101/ and others, it is possible to use variables in CSS now.
You can do:
:root {
--domainpath: url(http://www.yourdomain.com/_images/bg-header-noodletools-express.jpg);
}
#header {
background: var(--domainpath) no-repeat;
}
Unfortunately, CSS is not dynamic but you can do something like this:
store your URLs in the: root selector Which represents the root element and is identical to the selector html, except that its specificity is higher.
use the URL variable
:root {
/* define your variables here */
--url1: url(http://sitename.com/image1);
--url2: url(http://sitename.com/image2);
}
.img {
background-image: var(--url2);
width: 200px;
height: 200px;
}
Full source code: here
I am using the LESS styling language.
Consider the following CSS:
.side-bg
{
background:url(../img/layout/side-bg.jpg) top no-repeat;
}
Right now all of my images are in the folder ../img/ I wanted to be able to set a variable as the image path and use it like so:
#image-path: ../img;
.side-bg
{
background:url(#image-path/layout/side-bg.jpg) top no-repeat;
}
This does not work however. Its not a huge deal, I could always use find and replace if the image folder ever changed. I am just starting to learn LESS and was wondering if something like this is possible.
Try using string interpolation for things like this. Look for “variable interpolation” in docs.
#base-url: "http://assets.fnord.com";
background-image: url("#{base-url}/images/bg.png");
The solution:
.side-bg
{
background : ~"url( '#{image-path}/layout/side-bg.jpg' )" top no-repeat;
}
I was searching for the same question and found this page. Thought I would post my solution as someone else might find it useful...
#iconpath: '/myicons/';
.icon (#icon) {
background: no-repeat url('#{iconpath}#{icon}');
}
.icon-foo { .icon('foo.png'); }
.icon-bar { .icon('bar.png'); }
.icon-spuds { .icon('spuds.png'); }
which compiles to (used http://winless.org/online-less-compiler)
.icon-foo {
background: no-repeat url('/myicons/foo.png');
}
.icon-bar {
background: no-repeat url('/myicons/bar.png');
}
.icon-spuds {
background: no-repeat url('/myicons/spuds.png');
}
Here is an updated and clean way to handle image paths with LESS:
Start with your variable:
#imagePath: ~"../images/bg/";
Then use it like this:
.main-bg {
background: url('#{imagePath}my-background-image.png') repeat scroll left top;
}
Make sure the #imagePath variable points to the images folder from wherever you have your compiled CSS, NOT from where you have your LESS files. Also, you have to escape the address in the variable as in the example above to ensure that it does not get rewritten by less.js.
Anton Strogonoff's answer is good but be aware of the Issue #294:
Using the above which comes straight from the docs, I get url://pathtolessfile/variable I set. Even though I'm trying to set an absolute URL instead of a relative one. For example this works
#base-url: "../../images/";
#background-image : url ("#{base-url}/bg.png");
But this does not work
$base-url: "http://localhost/ns/assets/images/";
#background-image : url ("#{base-url}/bg.png";
In the latter example, my final source path becomes
http://localhost/ns/assets/css/libs/http://localhost/ns/assets/images/bg.png
Relative urls can be handled by the command line compiler, supposedly. There's probably some similar option you can set in the file watcher.
https://github.com/cloudhead/less.js/wiki/Command-Line-Usage
EDIT: There totally is. Just look: http://lesscss.org/usage/#command-line-usage-options
relativeUrls: true
i have a HyperLink on my site that is displaying an image instead of text. what i would like is for it to swap to another image on mouse-over using css. so far, i've come up with this:
<asp:HyperLink ID="hlHome" runat="server" ImageUrl="~/images/home.gif"
NavigateUrl="~/Default.asp" CssClass="homeHover" />
my css:
.homeHover { }
.homeHover:visited { background: url( ../images/home.gif ) no-repeat; }
.homeHover:Hover { background: url(../images/home_hover.gif) no-repeat; }
well, that does nothing. i don't know css well enough to figure this out. help please. also, i've been asked not to use javascript. i got it working using javascript but i need it to work using css. (or i suppose if i could get this to work programmatically would be okay too but... not sure about that. ) thanks.
Try this:
a.homeHover:visited { background: url( ../images/home.gif ) no-repeat; }
a.homeHover:hover { background: url(../images/home_hover.gif) no-repeat; }
The :<state> selector in CSS is what is known as a pseudoclass. Pseudoclasses are special selectors that can match an element based on things like behaviours or relative positions.