Newbe Dev Stack

Answer : Tim S. was much closer to a "correct" answer then the currently accepted one. If you want to have a 100% width, variable height background image done with CSS, instead of using cover (which will allow the image to extend out from the sides) or contain (which does not allow the image to extend out at all), just set the CSS like so: body { background-image: url(img.jpg); background-position: center top; background-size: 100% auto; } This will set your background image to 100% width and allow the height to overflow. Now you can use media queries to swap out that image instead of relying on JavaScript. EDIT: I just realized (3 months later) that you probably don't want the image to overflow; you seem to want the container element to resize based on it's background-image (to preserve it's aspect ratio), which is not possible with CSS as far as I know. Hopefully soon you'll be able to use the new srcset attribute on the img element...

Answer : Checkout this example: #content { height: 300px; text-align: center; font-size: 26px; color: #000; position:relative; } .bg{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat; animation-name: MOVE-BG; animation-duration: 100s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes MOVE-BG { from { transform: translateX(0); } to { transform: translateX(-187%); } } <div id="content">Foreground content <div class="bg"></div> </div> http://jsfiddle.net/5pVr4/4/ Animating background-position will cause some performance issues. Browsers will animate transform properties much cheaply, including translate. Here is an example using translate for an infinite slide animation (without prefixes): http://jsfiddle.net/brunomuller/5pVr4/504/ @-webkit-ke...

Answer : Nowadays, it is possible to do it simply with CSS property "background-blend-mode" . <div id="content">Only one div needed</div> div#content { background-image: url(my_image.png); background-color: rgba(255,255,255,0.6); background-blend-mode: lighten; /* You may add things like width, height, background-size... */ } It will blend the background-color (which is white, 0.6 opacity) into the background image. Learn more here (W3S). You can't use transparency on background-images directly, but you can achieve this effect with something like this: http://jsfiddle.net/m4TgL/ HTML: <div class="container"> <div class="content">//my blog post</div> </div>​ CSS: .container { position: relative; } .container:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; background-image: url('i...

Answer : You need to also create a ColorStateList for text colors identifying different states. Do the following: Create another XML file in res\color named something like text_color.xml . <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- disabled state --> <item android:state_enabled="false" android:color="#9D9FA2" /> <item android:color="#000"/> </selector> In your style.xml , put a reference to that text_color.xml file as follows: <style name="buttonStyle" parent="@android:style/Widget.Button"> <item name="android:textStyle">bold</item> <item name="android:textColor">@color/text_color</item> <item name="android:textSize">18sp</item> </style> This should resolve your issue. 1.Create a color folder ...