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');
}
Related
I have several containers with multiple background images specified for each of them and separated by comma, where one of the background images is the same for every container.
.foo_1 {
background-image: url(../img/01.png), url(../img/photo1.jpg);
}
.foo_2 {
background-image: url(../img/01.png), url(../img/photo2.jpg);
}
.foo_3 {
background-image: url(../img/01.png), url(../img/photo3.jpg);
}
.foo_1, .foo_2, .foo_3 {
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
}
Is there any way to avoid repeating the image which is used in each class, while still keeping the structure of a background image and allowing for the same manipulation as of a normal background-image property ?
Unfortunately, due to how the cascade works, it is not possible to specify multiple background layers in different rulesets without redeclaring the same background layer in each ruleset. See my answer to this related question for details:
A comma-separated list of background layers counts as a single value for the purposes of the cascade, which is why your second background declaration completely overrides the first.
While background is a shorthand for several other properties, it is not a shorthand for individual background layers, as they do not have their own properties. Since individual layer properties don't exist, you cannot use the cascade to override only certain layers while keeping the rest.
you can user repeat-x or repeat property.
but first of all you have need using Photoshop make there different images for each container :
1. first_img.jpg ( img1.jpg + imga.jpg)
1. second_img.jpg ( img1.jpg + imgb.jpg)
3. third_img.jpg ( img1.jpg + imgc.jpg)
.foo_1 {
background: url(../first_img.jpg) repeat-x or repeat ;
}
.foo_2 {
background: url(../second_img.jpg) repeat-x or repeat ;
}
.foo3 {
background: url(../third_img.jpg) repeat-x or repeat ;
}
Thanks.
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.
I'm using Compass (a CSS Framework) to generate sprite images.
It work, but compass generate only a background-position for each image.
Is it possible to get also the width and the height for each image in the sprite?
This is my code:
#import "ico/*.png";
#include all-ico-sprites;
The generated code:
.ico-sprite, .ico-bag-blue, .ico-bag-black {
background: url('../images/ico-s78b1a1919b.png') no-repeat;
}
.ico-bag-blue {
background-position: 0 0;
}
.ico-bag-black {
background-position: 0 -24px;
}
And the code i would like to have:
.ico-sprite, .ico-bag-blue, .ico-bag-black {
background: url('../images/ico-s78b1a1919b.png') no-repeat;
}
.ico-bag-blue {
background-position: 0 0;
width:40px;
height:24px;
}
.ico-bag-black {
background-position: 0 -24px;
width:44px;
height:30px;
}
Can anyone explain to me how I can do that?
Thanks.
This works:
#include all-<map>-sprites(true);
But you may want to consider the documented way of using configuration variables:
http://compass-style.org/help/tutorials/spriting/
You just specify the config variable before the import. In your case:
$ico-sprite-dimensions: true;
#import "ico/*png".
#include all-ico-sprites;
Sending true to the all include works, but as it's undocumented, it would seem that configuration variables are the preferred method.
Aside from dimensions these are the other configuration variables available:
$<map>-spacing // space in px around the sprites
$<map>-repeat // whether to repeat the sprite bg
$<map>-position // the x position of the sprite on the map
$<map>-sprite-base-class // the base class (default ".<map>-sprite")
$<map>-clean-up // whether to delete old image maps
$<map>-<sprite>-spacing // spacing, for individual sprites
$<map>-<sprite>-repeat // repeat, for individual sprites
$<map>-<sprite>-position // position, for individual sprites
I found the solution.
Just pass true as the second argument :
#include all-ico-sprites(true);
Quite simply.
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.