How to display an image using an img tag and css and class instead of src attribute


Tags: html,css,asp.net-mvc,kendo-ui

Problem :

I have to set the image of an img tag from the css. This is because both the company requirement and the class in the img tag changes dynamically. So, the following is my code for the img tag and the accompanying css. Since I am using Kendo UI, the values for class and title will be set from a webservice

    <img data-bind='attr: { class: exportPriorityIcon, title:   exportPriority }'/>

.priority-low {
    background-image: url('Images/export/priority_low.jpg');
}

.priority-medium {
    background-image: url('Images/export/priority_med.jpg');
}


So, the value exportPriorityIcon can be either priority-low  or priority-medium  as determined dynamically during run time. The value of title will be either "low" or "medium" 

The image is displayed. But the string value for the title is displayed on top of it with a square around it. If I removed the title attribute from the img tag, no image displayed.



Solution :

You'll need to also apply a height and width in the css for the image. If it changes per image then apply height and width in the same class as the background image. If it is always the same height/width apply it in a shared class. I'd also suggest to add a src on the img and use a transparent gif as the image. You should also apply an alt tag on the img, use the title as the text.


    CSS Howto..

    How would YOU do this: Tables or CSS? [closed]

    How to fill larger image into smaller div?

    How come bootstrap.min.css looks like commented

    How to remove CSS underline?

    How to get the complete css information if css class is given form the used style sheets files

    How to vertically center text with CSS?

    [SOLVED]How to generate dynamic external link?

    How to compare two css files and copy just the differences?

    How do I move a list's bullet point to the right side of the text?

    How to add padding to a reapeating CSS background without padding the content?

    How to draw a guitar string using css?

    How to create opacity effect on webOS?

    CSS Problem: How to make the images in a made of images touch vertically?
    .game td img { display: block; } Images come with their own white space...
    Read more

    How to combine css selectors

    How to style this button in CSS to appear pushed down?

    CSS - How to remove 2nd vertical scroll bar without changing anything else?

    How to use css3 transition on hover for td?

    How to change css display none or block with button click

    How to center a div and keep the alignment to its nested floating divs?

    How do i shift the text in twitter bootstrap navbar to center?

    Jquery how to add :hover to css style sheet

    How to create class in a custom CSS file by JavaScript?

    CSS: How to position an to the middle of the parent element [closed]

    How to wrap lines in an inline-block with CSS?

    Hide / show element if text is / isn't to long in jQuery

    How to detect when CSS value has changed?

    How to know where a CSS error occurred in dynamic content or how to stop the script upon CSS error

    How to make the table use multiple lines on long text using css

    How to scroll right and left by mouse scroll button

    CSS float: how to form the second row based on tallest DIV?