I am adding buttons dynamically based on the data in the database and i want to dispaly the buttons with images(each button have differnet images). images path is also defined in the database. my doubt is how to pass this button images from database to css.

my code is like this

var button1 = new OpenLayers.Control.Button({title:arraytypes[i], displayClass: "button1Display", trigger: selectmarker});

"button1Display" is the class in the extenal style sheet

this is my style sheet


  background-image: url("../smartcity/images/marker.png");

  background-size: 50px 52px;

  background-repeat: no-repeat;


in the above code background-image is hardcoded but i want to change it dynamically (from database).

2 Answers 2


You could create new CSS-classes dynamically via Javascript and then use them in your button definition. Here are two links which should help you out:

  1. https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript
  2. https://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply

Are you sure changes in a css file are propagated without a reload?

Why not create classes for each image? Then you can hook up any image to any button instantaneously. And have static CSS.

This may give a lot of CSS if you have many images, but you could write a simple stored procedure to create it automatically from the DB.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.