I know this is an old answer but for others searching for this; in your CSS try:

    background-size: auto 100%;

    background-size: contain; 

suits me

try

    .something { 
        background: url(images/bg.jpg) no-repeat center center fixed; 
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -100;  
    }

    body.bg {
    	background-size: cover;
    	background-repeat: no-repeat;
    	min-height: 100vh;
    	background: white url(../images/bg-404.jpg) center center no-repeat;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    }	
    Try This
    &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
    
    &lt;!-- language: lang-css --&gt;
    
        body.bg {
        	background-size: cover;
        	background-repeat: no-repeat;
        	min-height: 100vh;
        	background: white url(http://lorempixel.com/output/city-q-c-1920-1080-7.jpg) center center no-repeat;
        	-webkit-background-size: cover;
        	-moz-background-size: cover;
        	-o-background-size: cover;
        }	
    
    &lt;!-- language: lang-html --&gt;
    
        &lt;body class=&quot;bg&quot;&gt;
    
    
        	
        &lt;/body&gt;
    
    &lt;!-- end snippet --&gt;



I just had the same issue and this helped me:

    html {
        height: auto;
        min-height: 100%;
        background-size:cover;
    }

I have a dropdown box. When the user selects a value from the dropdown box, it performs a query to retrieve the data from the database, and shows the results in the front end using ajax. It takes a little bit of time, so during this time, I want to show a progress bar. I have searched, and I have found numerous tutorials on creating progress bars for uploads, but I haven&#39;t liked any. Can anybody provides some helpful guidance for me?

My ajax code:

    &lt;script&gt;
    $(function() {
        $(&quot;#client&quot;).on(&quot;change&quot;, function() {
          var clientid=$(&quot;#client&quot;).val();
         
            $.ajax({
                type:&quot;post&quot;,
                url:&quot;clientnetworkpricelist/yourfile.php&quot;,
                data:&quot;title=&quot;+clientid,
                success:function(data){
                 $(&quot;#result&quot;).html(data);
                }
            });
 
        });
    });
    &lt;/script&gt;

How to show progress bar while loading, using ajax

I have a pandas-Dataframe and use `resample()` to calculate means (e.g. daily or monthly means).
Here is a small example. 

    import pandas as pd  
    import numpy as np

    dates = pd.date_range(&#39;1/1/2000&#39;, periods=100)
    df = pd.DataFrame(np.random.randn(100, 1), index=dates, columns=[&#39;A&#39;])

    monthly_mean = df.resample(&#39;M&#39;).mean()

How do I plot the `monthly_mean` now?

How do I manage to use the index of my new created DataFrame `monthly_mean` as the x-axis?

Use index in pandas to plot data

I want background image fit with the height of the div, there&#39;s a way to do that? `background-size:cover;` fit only with the width and height autoscale (I need the opposite effect).
Thanks.


CSS background image to fit height, width should auto-scale in proportion

<p>I want background image fit with the height of the div, there's a way to do that? <code>background-size:cover;</code> fit only with the width and height autoscale (I need the opposite effect).
Thanks.</p>


I have a video, and I want it to FILL 100% of the width, and 100% of the height. And keep the aspect ratio.

Is it possible that it at least fills 100% for both? And if a bit of the video has to be out of the screen to keep the aspect ratio, that doesn&#39;t matter.


HTML:

        &lt;video preload=&quot;auto&quot; class=&quot;videot&quot; id=&quot;videot&quot; height=&quot;100%&quot; preload&gt;
        &lt;source src=&quot;BESTANDEN/video/tible.mp4&quot; type=&quot;video/mp4&quot; &gt;
        &lt;object data=&quot;BESTANDEN/video/tible.mp4&quot; height=&quot;1080&quot;&gt;
            &lt;param name=&quot;wmode&quot; value=&quot;transparent&quot;&gt;
            &lt;param name=&quot;autoplay&quot; value=&quot;false&quot; &gt;
            &lt;param name=&quot;loop&quot; value=&quot;false&quot; &gt;
        &lt;/object&gt;
CSS:

     .videof, .videot {
	    width: 100%    !important;
        height: 100%   !important;
     }

Video 100% width and height

I&#39;m trying to style a disabled input. I can use:

    .myInput[disabled] { }

or

    .myInput:disabled { }

Is the attribute selector the modern CSS3 way and the way to go forward? I used to use the pseudo-class, but I can&#39;t find any info on whether they are the old way and won&#39;t be supported or whether they&#39;re both equal and you can use whatever you like best.

I have no need to support older browsers (it&#39;s an intranet application), so is it:

 - attribute is newer and better
 - pseudo-class is still the way to go
 - whichever you like best
 - there&#39;s a technical reason to use one over the other

Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?

![position a div at centre of a responsive page][1]


  [1]: http://i.stack.imgur.com/vXdbR.jpg

I need to create a responsive page using bootstrap by position a div at the centre of a page as like in the below mentioned layout.

In a bootstrap responsive page how to center a div

I have select element, i want to remove the arrow, then i can add other icon..
i can do that for Firefox Safari and Chrome,
but this didn&#39;t work on **IE9**.

    .styled-select select 
    {
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;  /*Removes default chrome and safari style*/
        -moz-appearance: none;  /*Removes default style Firefox*/
        background: url(&#39;select_icon.png&#39;)  no-repeat;
         background-position: 179px 7px;
         text-indent: 0.01px;
         text-overflow: &quot;&quot;;
         color: #FCAF17;
         width:200px;
     }
SEE [Fiddle][1] on **IE9**.
all what i need is remove the arrow in ie9
Please JSFIDDLE answer. 

  [1]: http://jsfiddle.net/kBWYd/

Remove Select arrow on IE

I&#39;m making a responsive layout with a top fixed navbar.  Underneath I have two columns, one for a sidebar (3), and one for content (9).  Which on desktop looks like this

&gt;navbar  
[3][9]

When I `resize` to mobile the `navbar` is compressed and hidden, then the sidebar is stacked on top of the content, like this:

&gt;navbar  
[3]  
[9]

I would like the main content at the top, so I need to change the order on mobile to this:

&gt;navbar  
[9]  
[3]

I found [this article][1] which covers the same points, but the accepted answer has been edited to say that the solution no applies to the current version of Bootstrap.

How can I reorder these columns on mobile?  Or alternatively, how can I get the sidbar list-group into my expanding navbar?

Here is my code:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;!-- Latest compiled and minified CSS --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot; integrity=&quot;sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u&quot; crossorigin=&quot;anonymous&quot;&gt;

    &lt;!-- Optional theme --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css&quot; integrity=&quot;sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp&quot; crossorigin=&quot;anonymous&quot;&gt;

    &lt;!-- Latest compiled and minified JavaScript --&gt;
    &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&quot; integrity=&quot;sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

    &lt;div class=&quot;navbar navbar-inverse navbar-static-top&quot;&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;navbar-brand&quot;&gt;Brand Title&lt;/a&gt;
        &lt;button class=&quot;navbar-toggle&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navHeaderCollapse&quot;&gt;
          &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
          &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
          &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div class=&quot;collapse navbar-collapse navHeaderCollapse&quot;&gt;

        &lt;ul class=&quot;nav navbar-nav navbar-right&quot;&gt;&lt;!--original navbar--&gt;
          &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;FAQ&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;

        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;&lt;!--End Navbar Div--&gt;
        &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;

        &lt;div class=&quot;col-lg-3&quot;&gt;
      &lt;div class=&quot;list-group&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;list-group-item&quot;&gt;
        &lt;h4 class=&quot;list-group-item-heading&quot;&gt;Lorem ipsum&lt;/h4&gt;
        &lt;p class=&quot;list-group-item-text&quot;&gt;Lorem Ipsum is simply dummy text.&lt;/p&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;&lt;!--end sidebar--&gt;


    &lt;div class=&quot;col-lg-9&quot;&gt;
      &lt;div class=&quot;panel panel-default&quot;&gt;
        &lt;div class=&quot;panel-body&quot;&gt;
          &lt;div class=&quot;page-header&quot;&gt;
         Main Content
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;&lt;!--end main content area--&gt;

&lt;!-- end snippet --&gt;


  [1]: https://stackoverflow.com/questions/18057270/column-ordering-in-twitter-bootstrap-3

Content Type	Original Author	Original Content on Stackoverflow
Question	tanzio	View Question on Stackoverflow
Solution 1 - Css	Langlois.dev	View Answer on Stackoverflow
Solution 2 - Css	tanzio	View Answer on Stackoverflow
Solution 3 - Css	Beep	View Answer on Stackoverflow
Solution 4 - Css	Diego Quispe	View Answer on Stackoverflow
Solution 5 - Css	Simon	View Answer on Stackoverflow

CSS background image to fit height, width should auto-scale in proportion

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

Solution 3 - Css

Solution 4 - Css

Solution 5 - Css

Use index in pandas to plot data

How to show progress bar while loading, using ajax

Attributions