javascript - bootstrap div background-image -


here code used

<!doctype html> <html> <head> <title>registration</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <link href="twitter-bootstrap/docs/assets/css/bootstrap.css" rel="stylesheet"/> <link href="twitter-bootstrap/docs/assets/css/docs.css" rel="stylesheet"> <link href="twitter-bootstrap/docs/assets/js/google-code-prettify/prettify.css" rel="stylesheet"> <style type="text/css">     .container     {         width: 750px;         height : 300px;         margin-top : 50px;     } </style> </head> <body> <div class = "container"> <div class = "well" style = "box-shadow : 0 1px 10px rgba(0,0,0,1.0);">         <form id = "reg" class = "form-horizontal" method = "post" action = "reg.php">         <legend>registration form</legend>               <div class = "control-group">             <label class = "control-label">login name</label>             <div class = "controls">                 <div class = "input-prepend">                     <span class = "add-on"><i class = "icon-user"></i></span>                         <input type = "text" class = "input-xlarge" id = "login_name" name = "login_name" placeholder = "login name"><div id = "name_inspector"></div>                 </div>             </div>         </div> 

here's function reacts once input of textfield changed

$(document).ready(function(){     //$('#name_inspector').css('background-image', 'url(img/name-is-free.png)');     $("#login_name").change(     function()     {         $('#name_inspector').css('background-image', 'img/ajax-loader-arrows.gif');         $.get(         "is_usr_name_free.php?login_name="+$('#login_name').val(), {},         // @ success.         function(data)         {             var style_arr = data.split('@');             alert(style_arr[0]+style_arr[1]);             $('#name_inspector').css(style_arr[0], style_arr[1]);         }, "html");     }); 

in firebug style set correctly , picture loaded. however, there's no picture seen.

the problem here un-styled div has width 100%, , no height. similarly, span has no width, height 100% or text that's in it. either way, if there's nothing in box, no background displayed. can prove adding text in div or span. difference between in-line , block elements.

so, either need specify height div, or height span. should create enough space display image.


Comments

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -