For a better UX, I'm showing the empty profile image as a background until the real profile image is loaded, & I'm using Multiple Backgrounds feature to achieve this behavior, like in the following screenshot:
The html look something like:
<ul>
<li><span id='span-id' class="img-circle profile-image"><span></li>
<li ...
</ul>
The CSS look something like:
.img-circle {
border-radius: 150px;
}
.profile-image {
height: 100%;
display: block;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
The js look something like:
var url = 'profile-image-url-here';// depends on user's profile of course
var anonymousUrl = 'anonymous-profile-image-here';
var backgroundImage = "url(" + url + ") , url(" + anonymousUrl + ")";
$('#span-id').css('background-image', backgroundImage);
The Issue is:
While the previous code works fine in almost all scenarios/browsers, some android devices (their Chrome browser & even webviews) repeat the images in a very weird way like the following screenshot:
So, Why is this happening?!! .. & how to prevent it?
(I'm sure that the issue is not in the data, because each image has a link to the user's profile & links are already pointing to different profiles)
Related
I want to update the background image dynamically using CSS variables.
app-header {
background-color: var(--paper-red-500);
--app-header-background-front-layer: {
background-image: url(var(--profile-cover));
};
}
But it won't update using this approach:
this.customStyle['--profile-cover'] = url;
this.updateStyles();
The app-header element is made from Polymer :)
Any answers?
I got it,
this.customStyle['--profile-cover'] = 'url(\'' + url + '\')'
So basically I have to change the CSS:
background-image: var(--profile-cover);
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 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
So, since I have problems deciding an absolute theme for my site, I'd like to let the user choose a theme from a dropdown menu, and when an option is clicked, it'll change the background image, background color, and background positioning.
eg. If the user chose the "Mario Bros 3" theme, they'd get
background-image:url('smb3.jpg');
background-repeat:repeat-x;
background-position:left bottom;
background-attachment: fixed;
background-color: #6899f8;
And if you select "Zelda LTTP" theme, you'd get
background-image:url('zeldalttp.jpg');
background-repeat:no-repeat;
background-position:left bottom;
background-attachment: fixed;
background-color: Black;
I'd like this to be in a dropdown menu, and have it remember your choice, so that it applies every time.
I have next to no idea how to do this, can anybody help?
I'd select the themes by different classes on the body, like that:
body.smb2{
background-image:url('smb3.jpg');
background-repeat:repeat-x;
background-position:left bottom;
background-attachment: fixed;
background-color: #6899f8;
}
body.zelda{
background-image:url('zeldalttp.jpg');
background-repeat:no-repeat;
background-position:left bottom;
background-attachment: fixed;
background-color: Black;
}
Then set the body class with javascript (or server-side) and save the choice in a cookie.
Exactly, put the css in a css file then you could change it like that:
HTML:
<select id="select">
<option value=""></option>
<option value="smb2">SMB 2</option>
<option value="zelda">Zelda</option>
</select>
pure JS:
var sel = document.getElementById('select');
sel.onchange = function(){
document.body.className = sel.value;
};
or jQuery if you prefer:
$('select').change(function(){
$('body').prop('class',$(this).val());
});
Ok the problem on your site is, that the body already has a bunch of other classes. And className overwrites all of them.
One solution would be to save the old classes and then add the new ones like that:
var saveclass = null;
var sel = document.getElementById('select');
sel.onchange = function(){
saveclass = saveclass ? saveclass : document.body.className;
document.body.className = saveclass + ' ' + sel.value;
};
or jQuery:
var currentclass = null;
$('select').change(function(){
$('body').removeClass(currentclass).addClass($(this).val());
currentclass = $(this).val();
});
If you look into WordPress' or numerous message boards' theming architecture, they'd normally serve separate css files depending on user selection. That would, however, be justifiable if you have significant difference styling both themes (i.e. more than one line background difference) making sure redundant css is not received by the client.
If the differences are minor, Andy's answer would work well. And yes, do save the choice in a cookie - this would allow for their preference to be saved even without a profile stored on the server, meaning they don't have to re-select the correct theme every time they visit the site.
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.