Dynamically changing background color in bootstrap

css, javascript, jquery, twitter-bootstrap

Solution

you can use jQuery and do as follow :

To change the bc-image:

$('.YourContainer').css('background-image', 'url(../images/backgrounds/bc-image.jpg)');

to change the bc-color :

$('.YourContainer').css("background-color", "yellow");

don't forget to add jQuery :

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>

edit because probably you don't know how to use the code in an embadded script tag :

        <!doctype html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>Demo</title>
        </head>
        <body>
            <a href="http://jquery.com/">jQuery</a>
            <script src="jquery.js"></script>
            <script type='text/javascript'>

            $( document ).ready(function() {



           $('.YourContainer').css('background-image', 
             'url(../images/backgrounds/bc-image.jpg)');



           });     
        </script>
    </body>
    </html>

Live Demo

Problem

I am new to bootstrap. After researching, I understand that I can use javascript to change background color. I would like to dynamically change the background color or image of a specific container. I am using external links to the style .css files (example: href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap->theme.min.css"> ).

Original source