How do I use CSS3 gradients for my `background-color` and then apply a `background-image` to apply some sort of light transparent texture?

How do I combine a background-image and CSS3 gradient on the same element?

In what situations is it more appropriate to use an HTML &lt;code&gt;IMG&lt;/code&gt; tag to display an image, as opposed to a CSS &lt;code&gt;background-image&lt;/code&gt;, and vice-versa?

Factors may include accessibility, browser support, dynamic content, or any kind of technical limits or usability principles.


When to use IMG vs. CSS background-image?

I have a JPEG file that I&#39;m using as a background image for a search page, and I&#39;m using CSS to set it because I&#39;m working within [Backbone.js][1] contexts:

    background-image: url(&quot;whatever.jpg&quot;);

I want to apply a CSS 3 blur filter *only* to the background, but I&#39;m not sure how to style just that one element. If I try:

    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);

just underneath `background-image` in my CSS, it styles the whole page, rather than just the background. Is there a way to select just the image and apply the filter to that? Alternatively, is there a way to just turn the blur off for every other element on the page?

  [1]: https://en.wikipedia.org/wiki/Backbone.js


How to apply a CSS filter to a background image

I was looking at the source of a greasemonkey userscript and noticed the following in their css:

    .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

I can appreciate that a greasemonkey script would want to bundle anything it can within the source as opposed to host it on a server, that&#39;s obvious enough. But since I had not seen this technique previously, I considered its use and it seems appealing for a number of reasons:

1. It will reduce the amount of HTTP requests on page load, thus enhancing performance
2. If no CDN, then it will reduce the amount of traffic generated through cookies being sent alongside of images
3. CSS files can be cached
4. CSS files can be GZIPPED 

Considering that IE6 (for instance) has problems with cache for background images, this seems like it&#39;s not the worst idea...

So, is this a good or bad practice, why WOULDN&#39;T you use it and what tools would you use to base64 encode the images?

**update - results of testing**

 - testing with image: http://fragged.org/dev/map-shot.jpg - **133.6Kb** 

 - test URL: http://fragged.org/dev/base64.html

 - dedicated CSS file:
   http://fragged.org/dev/base64.css -
   **178.1Kb** 
 - GZIP encoding server side 

 - resulting size sent to client (YSLOW
   components test): **59.3Kb** 

 - Saving of data sent to client browser of: **74.3Kb**


Nice, but it will be slightly less useful for smaller images, I guess.


&gt; UPDATE: Bryan McQuade, a software engineer at Google, working on PageSpeed, expressed at ChromeDevSummit 2013 that data:uris in CSS is considered a render-blocking anti-pattern for delivering critical/minimal CSS during his talk `#perfmatters: Instant mobile web apps`. See http://developer.chrome.com/devsummit/sessions and keep that in mind - [actual slide](https://docs.google.com/presentation/d/1z49qp03iXAJIkbXaMtCmWW_Pnnq-MzXGW139Xw8-paM/edit#slide=id.g174590d5d_0194)

Is embedding background image data into CSS as Base64 good or bad practice?

I have a background image in the following div, but the image gets cut off:

     &lt;div style=&#39;text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;&#39; id=&quot;mainpage&quot; align=&quot;center&quot;&gt;

Is there a way to show the background image without cutting it off?

Fit background image to div

I want to show an image from an URL with a certain width and height even if it has a different size ratio. 
So I want to resize (maintaining the ratio) and then cut the image to the size I want.
&lt;p&gt;
I can resize with html `img` property and I can cut with `background-image`.
&lt;br&gt;
How can I do both?


Example:

This image:

![enter image description here][1]

&lt;br&gt;
Has the size `800x600` pixels and I want to show like an image of `200x100` pixels

&lt;br&gt;
With `img` I can resize the image `200x150px`:

    &lt;img 
        style=&quot;width: 200px; height: 150px;&quot; 
        src=&quot;http://i.stack.imgur.com/wPh0S.jpg&quot;&gt;

&lt;br&gt;
That gives me this:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;img style=&quot;width: 200px; height: 150px;&quot; src=&quot;https://i.stack.imgur.com/wPh0S.jpg&quot;&gt;

&lt;!-- end snippet --&gt;

&lt;br&gt;

And with `background-image` I can cut the image `200x100` pixels.

    &lt;div 
        style=&quot;background-image:
               url(&#39;https://i.stack.imgur.com/wPh0S.jpg&#39;); 
        width:200px; 
        height:100px; 
        background-position:center;&quot;&gt;&amp;nbsp;&lt;/div&gt;

&lt;p&gt;
Gives me:


&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

        &lt;div style=&quot;background-image:url(&#39;https://i.stack.imgur.com/wPh0S.jpg&#39;); width:200px; height:100px; background-position:center;&quot;&gt;&amp;nbsp;&lt;/div&gt;

&lt;!-- end snippet --&gt;



&lt;p&gt;&lt;br&gt;&lt;p&gt;
How can I do both?
&lt;br&gt;
Resize the image and then cut it the size I want?


  [1]: https://i.stack.imgur.com/wPh0S.jpg

CSS Display an Image Resized and Cropped

Is it possible to have two background images?  For instance, I&#39;d like to have one image repeat across the top (repeat-x), and another repeat across the entire page (repeat), where the one across the entire page is behind the one which repeats across the top.

I&#39;ve found that I can achieve the desired effect for two background images by setting the background of html and body:

&lt;!-- language: lang-css --&gt;

    html {
        background: url(images/bg.png);
    }
    
    body {
        background: url(images/bgtop.png) repeat-x;
    }

Is this &quot;good&quot; CSS?  Is there a better method?  And what if I wanted three or more background images?

Can I have multiple background images using CSS?

I have a DIV and I would like to put a pattern as background. This pattern is gray. So to make it a little more nice, I would like to put a light transparent color &quot;layer&quot; over. Below is what I tried but which did not work. Is there a way to put the colored layer over the background image? 

Here&#39;s my CSS:

    background: url(&#39;../img/bg/diagonalnoise.png&#39;);
    background-color: rgba(248, 247, 216, 0.7);

Semi-transparent color layer over background-image?

I am trying to set a background image for the home page. I am getting the image place from start of the screen and filling the width but not the height. 
Am I missing something in my code? Are there image standards for flutter? Do images scale based on each phone&#39;s screen resolution?


    class BaseLayout extends StatelessWidget{
      @override
      Widget build(BuildContext context){
        return new Scaffold(
          body: new Container(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                new Image.asset(&quot;assets/images/bulb.jpg&quot;) 
              ]
            )
          )
        );
      }
    }

How do I Set Background image in Flutter?

I have a website (g-floors.eu) and I want to make the background (in css I have defined a bg-image for the content) also responsive. Unfortunately I really don&#39;t have any idea on how to do this except for one thing that I can think of but it&#39;s quite a workaround. Creating multiple images and then using css screen size to change the images but I wanna know if there is a more practical way in order to achieve this.

Basically what I wanna achieve is that the image (with the watermark &#39;G&#39;) automatically resizes without displaying less of the image. If it&#39;s possible of course

link: [g-floors.eu][1]

  [1]: http://www.g-floors.eu

Code I have so far (content part)

    


&lt;!-- language: lang-css --&gt;

    #content {
      background-image: url(&#39;../images/bg.png&#39;);
      background-repeat: no-repeat;
      position: relative;
      width: 85%;
      height: 610px;
      margin-left: auto;
      margin-right: auto;
    }


  



Responsive css background images

I have panel which I colored blue if this panel is being selected (clicked on it). Additionally, I add a small sign (`.png` image) to that panel, which indicates that the selected panel has been already selected before.

So if the user sees for example 10 panels and 4 of them have this small sign, he knows that he has already clicked on those panels before. This work fine so far. The problem is now that I can&#39;t display the small sign and make the panel blue at the same time.

I set the panel to blue with the css `background: #6DB3F2;` and the background image with `background-image: url(&#39;images/checked.png&#39;)`. But it seems that the background color is above the image so you cannot see the sign.

Is it therefore possible to set `z-index`es for the background color and the background image?

CSS: background image on background color

Is it possible to set a `background-image` for an SVG `&lt;path&gt;` element?

For instance, if I set the element `class=&quot;wall&quot;`, the CSS style `.wall {fill: red;}` works, but `.wall{background-image: url(wall.jpg)}` does not, neither `.wall {background-color: red;}`.

Fill SVG path element with a background-image

I want to rotate the image which is placed in the button of scrollbar in Chrome. Now I have a CSS with this content:
```css
::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(images/arrowup.png);
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ECEEEF;
    border-color: #999;
}
```
I wish to rotate the image without rotating its content.


How to rotate the background image in the container?

My goal is to make an HTML page that is similar to a &quot;photo frame&quot;. In other words, I want to make a blank page that is surrounded by 4 pictures.

This is my code:

    &lt;table&gt;
        &lt;tr&gt;
            &lt;td class=&quot;bTop&quot; colspan=&quot;3&quot;&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class=&quot;bLeft&quot;&gt;
            &lt;/td&gt;
            &lt;td class=&quot;middle&quot;&gt;
            &lt;/td&gt;
            &lt;td class=&quot;bRight&quot;&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class=&quot;bBottom&quot; colspan=&quot;3&quot;&gt;
            &lt;/td&gt;
        &lt;/tr&gt;                                                    
    &lt;/table&gt;

And the CSS classes are the following:

    .bTop
    {
        width: 960px;
        height: 111px;
        background-image: url(&#39;../Images/BackTop.jpg&#39;);
    }
    .bLeft
    {
        width: 212px;
        height: 280px;
        background-image: url(&#39;../Images/BackLeft.jpg&#39;);    
        
    }
    
    .middle
    {
        width: 536px;
        height: 280px;
    }
    
    .bRight
    {
        width: 212px;
        height: 280px;
        background-image: url(&#39;../Images/BackRight.jpg&#39;);    
    }
    
    .bBottom
    {        
        width: 960px;
        height: 111px;
        background-image: url(&#39;../Images/BackBottom.jpg&#39;);       
    }

My problem is that I am getting thin white lines between the cells of the table, I mean that the border of pictures is not continuous. How can I avoid these white spaces?


How to completely remove borders from HTML table

I&#39;m trying to make a &quot;fade-in fade-out&quot; effect using the CSS transition. But I can&#39;t get this to work with the background image...

The CSS:

&lt;!-- language: lang-css --&gt;

    .title a {
        display: block;
        width: 340px;
        height: 338px;
        color: black;
        background: transparent;
        /* TRANSITION */
        -webkit-transition: background 1s;
        -moz-transition: background 1s;
        -o-transition: background 1s;
        transition: background 1s;
    }

    .title a:hover {
        background: transparent;
        background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
        /* TRANSITION */
        -webkit-transition: background 1s;
        -moz-transition: background 1s;
        -o-transition: background 1s;
        transition: background 1s;
    }​

Take a look: http://jsfiddle.net/AK3La/

CSS3 background image transition

I&#39;ve tried to add background size to IE but it&#39;s not working at all:

HTML

    &lt;h2 id=&quot;news&quot;&gt;Not&#237;cias &lt;img src=&quot;white-marker.png&quot; alt=&quot;&quot; /&gt;&lt;/h2&gt;

CSS:

    div#content h2#news {
        background: url(&#39;../images/news-background.jpg&#39;) no-repeat;
        background-size: 100%;
        border-radius: 20px;
        color: #fff;
        margin: 20px 0 0 20px;
        padding: 8px 20px;
        width: 90%;
        -moz-background-size: 100%;
        -moz-border-radius: 20px;
        -webkit-background-size: 100%;
        -webkit-border-radius: 20px;
    }

What&#39;s wrong with the [filter][1]?


  [1]: http://msdn.microsoft.com/en-us/library/ms532969%28v=vs.85%29.aspx

IE 8: background-size fix

This question [was asked before][1] but the solution is not applicable in my case. I want to make sure certain background images are printed because they are integral to the page. (They are not images directly in the page because there are several of them being used as CSS sprites.)

Another solution on that same question suggests using `list-style-image`, which only works if you have a different image for every icon, no CSS sprites possible.

Aside from creating a separate page with the icons inline, is there another solution?


  [1]: https://stackoverflow.com/questions/596876/how-can-i-print-background-images-in-ff-or-ie

How can I force browsers to print background images in CSS?

I want to set a background image to different divs, but my problems are:
 

 1. The size of image is fixed(60px).    
 2. Varying  div&#39;s size

How can I stretch the background-image to fill the whole background of the div? 

&lt;!-- language: lang-css --&gt;

    #div2{
      background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
      height:180px;
      width:200px;
      border: 1px solid red;
    }


[Check the code here.][1]


  [1]: http://jsfiddle.net/ranasaani/qdzaw/

How to stretch the background image to fill a div

I want to change background dynamically in JS and my set of images is in base64 encoded.
I try:

    document.getElementById(&quot;bg_image&quot;).style.backgroundImage = 
       &quot;url(&#39;http://amigo.com/300107-2853.jpg&#39;)&quot;; 

with perfect result, 

yet I fail to do the same with:   

    document.getElementById(&quot;bg_image&quot;).style.backgroundImage = 
       &quot;url(&#39;data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...&#39;)&quot;;

nor 

    document.getElementById(&quot;bg_image&quot;).style.backgroundImage = 
       &quot;data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...&quot;;

Is there any way to do it?

Is there a way to set background-image as a base64 encoded image?

I have seen this question a lot both on SO and the Web. But none of them has been what I am looking for.

How do I add a color-overlay to a background image using CSS only?

Example HTML:

    &lt;div class=&quot;testclass&quot;&gt;
    &lt;/div&gt;

Example CSS:

    .testclass {
        background-image: url(&quot;../img/img.jpg&quot;);
    }

Please note:

 - I want to solve this by only using CSS. i.e I do NOT want to add a child div within the div &quot;testclass&quot; for the color overlay.

 - This should not be a &quot;hover effect&quot; I want to simply just add a color-overay to the background image.

 - I want to be able to use opacity i.e. I am looking for a solution that allows RGBA color.

 - I am looking for just one color, lets say black. Not a gradient.


Is this possible? (I would be surprised if not, but I have not been able to find anything about this), and if so what the best way to accomplish this? 

All suggestions and advice are appreciated!

  

How to add a color overlay to a background image?

`img` with `srcset` attribute looks like a great way of doing responsive images. Is there an equivalent syntax that works in css `background-image` property?

HTML

    &lt;img src=&quot;small.jpg&quot; srcset=&quot;medium.jpg 1000w, large.jpg 2000w&quot; alt=&quot;yah&quot;&gt;

CSS

```css
.mycontainer {
    background: url(&#39;what goes here?&#39;);
}
```


Is there a srcset equivalent for css background image

I am trying to make a button with a selector my button can have the following states:

 - Enabled/Disabled
 - Pressed/Not Pressed

According to the states mentioned above. I need to manipulate the button&#39;s:

 - Text color 
 - background image

The button starts off my being disabled so it should have the disabled textColor and the disabled button background. But I can see the default textColor (specified in style) and NO background image!

Here is my selector button_selector.xml

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
    
    &lt;selector xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;
        
        &lt;item android:state_pressed=&quot;false&quot;
            android:state_enabled=&quot;false&quot;
            android:textColor=&quot;#9D9FA2&quot;
            android:drawable=&quot;@drawable/button&quot; /&gt;    
        
        &lt;item android:state_pressed=&quot;true&quot;
            android:state_enabled=&quot;true&quot;
            android:drawable=&quot;@drawable/button_pressed&quot;/&gt;
        
        &lt;item android:state_pressed=&quot;true&quot;
            android:state_enabled=&quot;false&quot;
            android:textColor=&quot;#9D9FA2&quot;
            android:drawable=&quot;@drawable/button&quot;/&gt;
    
        &lt;item android:state_pressed=&quot;false&quot;
            android:state_enabled=&quot;true&quot;
            android:drawable=&quot;@drawable/button&quot;/&gt;    
        
    &lt;/selector&gt;

And here is my button declaration in the my layout.xml

		&lt;Button android:id=&quot;@+id/reserve_button&quot;
		  	android:text=&quot;@string/reserve_button&quot;
			android:layout_width=&quot;120dp&quot;
			android:layout_height=&quot;40dp&quot;
			android:layout_marginTop=&quot;10dp&quot;
			android:layout_marginLeft=&quot;20dp&quot;
			android:paddingRight=&quot;15dp&quot;
			android:layout_gravity=&quot;left&quot;
			style=&quot;@style/buttonStyle&quot;
			android:background=&quot;@drawable/button_selector&quot; /&gt;

And finally this is my style (where my default textColor is set)

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
    
     &lt;resources&gt;
    	
    	 &lt;style name=&quot;buttonStyle&quot;&gt;
    	  &lt;item name=&quot;android:textStyle&quot;&gt;bold&lt;/item&gt;
    	  &lt;item name=&quot;android:textColor&quot;&gt;#282780&lt;/item&gt;
    	  &lt;item name=&quot;android:textSize&quot;&gt;18sp&lt;/item&gt;
    	 &lt;/style&gt;
    	 
    &lt;/resources&gt;

Please help!



Android: textColor of disabled button in selector not showing?

I have a simple Chrome extension that uses the content script feature to modify a website. More specifically, the `background-image` of said website.

For some reason I can&#39;t seem to be able to use local images, even though they are packed in the extension.

    body {
	    background: #000 url(&#39;image.jpg&#39;) !important;
	    background-repeat: repeat !important;
    }

That&#39;s it, the simplest CSS... but it won&#39;t work. The browser doesn&#39;t load the image.

Google Chrome Extensions - Can&#39;t load local images with CSS

Let&#39;s say I have

    &lt;div class=&quot;myDiv&quot;&gt;Hi there&lt;/div&gt;

I want to put a `background-image` and give it an `opacity` of `0.5` – but I want that the text I have written will have full opacity (`1`). 

If I would write the CSS like this

&lt;!-- language: lang-css --&gt;

    .myDiv { opacity:0.5 }

 **everything** will be in low opacity – and I don&#39;t want that.

So my question is – How can I get low-opacity background image with full opacity text?

Can I set an opacity only to the background image of a div?

I&#39;m currently working on a mobile landing page for a company. It&#39;s a really basic layout but below the header there&#39;s an image of a product which will always be 100% width (the design shows it always going from edge to edge). Depending on the width of the screen the height of the image will obviously adjust accordingly. I originally did this with an img (with a CSS width of 100%) and it worked great but I&#39;ve realised that I&#39;d like to use media queries to serve different images based on different resolutions - let&#39;s say a small, medium and a large version of the same image, for example. I know you can&#39;t change the img src with CSS so I figured I should be using a CSS background for the image as opposed to an img tag in the HTML.

I can&#39;t seem to get this working properly as the div with the background image needs both a width and a height to show the background. I can obviously use &#39;width: 100%&#39; but what do I use for the height? I can put a random fixed height like 150px and then I can see the top 150px of the image but this isn&#39;t the solution as there isn&#39;t a fixed height. I had a play and found that once there is a height (tested with 150px) I can use &#39;background-size: 100%&#39; to fit the image in the div correctly. I can use the more recent CSS3 for this project as it&#39;s aimed solely at mobile.

I&#39;ve added a rough example below. Please excuse the inline styles but I wanted to give a basic example to try and make my question a little clearer.

	&lt;div id=&quot;image-container&quot;&gt;
		&lt;div id=&quot;image&quot; style=&quot;background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;&quot;&gt;&lt;/div&gt;
	&lt;/div&gt;

Do I maybe have to give the container div a percentage height based on the whole page or am I looking at this completely wrong?

Also, do you think CSS backgrounds are the best way to do this? Maybe there&#39;s a technique which serves different img tags based on device/screen width. The general idea is that the landing page template will be used numerous times with different product images so I need to make sure I develop this the best way possible.

I apologise is this is a little long-winded but I&#39;m back and forth from this project to the next so I&#39;d like to get this little thing done. Thanks in advance for your time, it&#39;s much appreciated.
Regards

100% width background image with an &#39;auto&#39; height

I&#39;m trying to get a background image of a HTML element (body, div, etc.) to stretch its entire width and height.

Not having much luck. Is it even possible or do I have to do it some other way besides it being a background image?

My current css is:
	
    body {
    	background-position: left top;
    	background-image: url(_images/home.jpg);
    	background-repeat: no-repeat;
    }

Thanks in advance.

Edit: I&#39;m not keen on maintaining the CSS in Gabriel&#39;s suggestion so I&#39;m changing the layout of the page instead. But that seems like the best answer so I&#39;m marking it as such.

How do I stretch a background image to cover the entire HTML element?

I have three problems:

1. When I tried to use a background image in a smaller size div, the div shows only part of image. How can I show the full or a specific part of image?

2. I have a smaller image and I want to use in a bigger div. But don&#39;t want to use repeat function.

3. Is there any way in CSS to manipulate the opacity of an image?

Background images: how to fill whole div if image is small and vice versa

I have a button of which when I click it I want to alert the `background-image` URL of `#div1`.

Is it possible?

Can I get div&#39;s background-image url?

I plan on building a custom photo gallery for a friend and I know exactly how I am going to be producing the HTML, however I am running into a small issue with the CSS.&lt;br&gt;(I would prefer to not have the page styling rely on jQuery if possible)
&lt;hr&gt;
My question regards:&lt;br&gt;
`Data-Attribute` in HTML&lt;br&gt;
`Background-image` in CSS
&lt;hr&gt;
I am using this format for my html thumbnails:&lt;br&gt;
`&lt;div class=&quot;thumb&quot; data-image-src=&quot;images/img.jpg&quot;&gt;&lt;/div&gt;`&lt;br&gt;&lt;br&gt;

and I assume the CSS should look something like this:&lt;br&gt;

    .thumb {
        width:150px;
        height:150px;
        background-position:center center;
        overflow:hidden;
        border:1px solid black;

        background-image: attr(data-image-src);/*This is the question piece*/
    }

&lt;hr&gt;
My goal is to take the `data-image-src` from the `div.thumb` in my HTML file and use it for each `div.thumb`(s) `background-image` source in my CSS file.

Here is a Codepen Pen in order to get a dynamic example of what I am looking for:&lt;br&gt;
http://codepen.io/thestevekelzer/pen/rEDJv

Using HTML data-attribute to set CSS background-image url

I&#39;d like to add a background to a div, position right center, but!, have some padding to the image.  The div has padding for the text, so I want to indent the background a little.  probably makes most sense w/ example:

http://jsbin.com/umuvud/edit#javascript,html,live

Thanks!

Positioning background image, adding padding

I have an image called myImage.jpg. This is my CSS:

    body {
        background-image:url(&quot;../images/myImage.jpg&quot;);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

For some reason, when I do this, the width of myImage stretches across the entire screen but the height only stretches until the height of everything else on the page. So if I put a bunch of 

    &lt;br&gt;

in my html page, then the height will increase. If my HTML page consists only of a 

    &lt;div id=&#39;header&#39;&gt;
        &lt;br&gt;
    &lt;/div&gt;

then the height of the background image would just be the height of one

    &lt;br&gt;

How do I make the height of my background image 100% of the screen which the user is using to view the webpage?

CSS: stretching background image to 100% width and height of screen?

I am trying to set a background-image to stretch to the full extent of a `&lt;div&gt;`&#39;s width and height. The `&lt;div&gt;` will be of variable size, so I am using `background-size: cover;`

    background: url(&quot;../images/bkgnd-sidebar.png&quot;) no-repeat left top cover;

I cannot figure out how to place it in this shorthand notation and have it work. If I list each property independently, it works fine, but I was hoping for an all-in-one solution.

This works, but is not preferred:

    background-size:cover;
    background-image:url(&#39;../images/bkgnd-sidebar.png&#39;);

How to include the background-cover value in the shorthand background property?

I have sort of elements with this pattern:

    &lt;div data-image=&quot;{imageurl}&quot; ...&gt;&lt;/div&gt;

I want to set this elements `background-image` to `data-image`. I test this CSS code:

    div[data-image] {
        border: 2px solid black;
        background-image: attr(data-image url);
    }

border show correctly but nothing happened for background
How can do I fix this code only with css (not js or jq)?

CSS set background-image by data-image attr

I&#39;ve got a div and apply `:before` and `:after` an image as content. That works perfectly. Now I would need to apply a background image so it does repeat as the `div` resizes, but it does not seem to work. Is background image on `:before` and `:after` supposed to be working?

The current code:

HTML:

    &lt;div id=&quot;videos-part&quot;&gt;test&lt;/div&gt;
CSS:

    #videos-part{
        background-color: #fff;
        height: 127px;
        width: 764px;
        margin: -6px 0 -1px 18px;
        position: relative;
    }
    #videos-part:before{
        width: 16px;
        content: &quot; &quot;;
        background-image: url(/img/border-left3.png);
        position: absolute;
        left: -16px;
        top: -6px;
    }

:before and background-image... should it work?

&gt; **Possible Duplicate:**  
&gt; [How to stretch images with no antialiasing](https://stackoverflow.com/questions/8597081/how-to-stretch-images-with-no-antialiasing)  

&lt;!-- End of automatically inserted text --&gt;

Is it in any way possible to disable antialiasing when scaling up an image ?

Right now, i get something that looks like this :

![What i get][1]

Using the following css code :

```css
#bib {
    width: 104px;
    height: 104px;
    background-image: url(/media/buttonart_back.png);
    background-size: 1132px 1360px;
    background-repeat: no-repeat;
}
```

What I would like, is something like this :

![What i seek][2]

In short, any CSS flag to **disable** anti-aliasing from when scaling up images, preserving hard edges.

Any javascript hacks or similar are welcome too.

(Yes, I am aware that php and imagemagick can do this as well, but would prefer a css based solution.)

**UPDATE**
The following have been suggested :

```css
image-rendering: -moz-crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
```

But that doesn&#39;t seem to work on background images.


  [1]: http://i.stack.imgur.com/NXJxc.png
  [2]: http://i.stack.imgur.com/t1lml.png

Disable antialising when scaling images

This is my code:

&lt;!-- language: css --&gt;

    background-color:#fff;
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-size:cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-position: center center; 

It&#39;s working on desktop, iPad and Android mobile:

[![working][1]][1]

On Chrome and Safari on iPhone, the background is too big:

[![too big][2]][2]

  [1]: https://i.stack.imgur.com/Px62l.png
  [2]: https://i.stack.imgur.com/LhgU5.jpg

background-size: cover not working on iOS

I am using rails 3.2 and i have to set a background for one of the page and i have tried many ways and nothing went right, so looking for some good help. I have tried 

    background: url(&lt;%= asset_path &#39;background.jpg&#39; %&gt;)
    
    background: url(&quot;public/background.jpg&quot;);
    
    background-image:url(&#39;/assets/images/background.jpg&#39;)

and nothing worked. Please help me.

Rails: How to set a background image in rails from css?

I have a CoreBundle that contains main css files and images. Now I have a problem when I load an image from css; the image isn&#39;t shown.

     background-image:url(../images/file.png)

(with a full path it works)

 I installed the assets using the command: `assets:install web` and i can see the image and css files under `web/bundles/cmtcore/(css|images)`.

Here&#39;s the file structure inside the core bundle:

    /CoreBundle
        /Resources
            /public
                /css
                    /main.css
                /images
                    /file.png

And here&#39;s how I load the css file into the template:

     {% stylesheets &#39;@CmtCoreBundle/Resources/public/css/*&#39; %}
			&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;{{ asset_url }}&quot; /&gt;
     {% endstylesheets %}

Thank you for your help in advance.

Symfony2 - Assetic - load images in CSS

Why the [following example][1] shows the image in Firefox 4, but not in Chrome 10 and Internet Explorer 8?

HTML:

    &lt;div style=&quot;background-image: url(&#39;http://www.mypicx.com/uploadimg/1312875436_05012011_2.png&#39;)&quot;&gt;&lt;/div&gt;

CSS:
   
    div {
        width: 60px;
        height: 60px;
        border: 1px solid black;
    }

Any ideas for workarounds?

  [1]: http://jsfiddle.net/dvqU8/13/

Why an inline &quot;background-image&quot; style doesn&#39;t work in Chrome 10 and Internet Explorer 8?

I have been trying to add background image to a div class using CSS, but I didn&#39;t have any success.

HTML code:

    &lt;header id=&quot;masthead&quot; class=&quot;site-header&quot; role=&quot;banner&quot;&gt;
        &lt;div class=&quot;header-shadow&quot;&gt;&lt;/div&gt;
            &lt;hgroup&gt;&lt;/hgroup&gt;
            &lt;nav role=&quot;navigation&quot; class=&quot;site-navigation main-navigation&quot;&gt;

            &lt;/nav&gt;&lt;!-- .site-navigation .main-navigation --&gt;
    &lt;/header&gt;&lt;!-- #masthead .site-header --&gt;

CSS:

    .header-shadow{
        background-image: url(&#39;../images/header-shade.jpg&#39;);
    }

Additional information:

This is an image with a shadow and I am using it at the top of the website, so it mustn&#39;t have a particular width.



Adding background image to div using CSS

I have a `div` with a `background-image`. I want to overlay the background-image with an rgba color (`rgba(0,0,0,0.1)`) when the user hovers the div.

I was wondering if there&#39;s a one-div solution (i.e. not with multiple divs, one for the image and one for the color, etc.). 

I tried multiple things:

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;the-div&quot; id=&quot;test-1&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;the-div&quot; id=&quot;test-2&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;the-div&quot; id=&quot;test-3&quot;&gt;&lt;/div&gt;

And this CSS:

&lt;!-- language: lang-css --&gt;

    .the-div {
        background-image: url(&#39;the-image&#39;);
        margin: 10px;
        width: 200px;
        height: 80px;
    }

    #test-1:hover {
        background-color: rgba(0,0,0,0.1);
    }

    #test-2:hover {
        background: url(&#39;the-image&#39;), rgba(0,0,0,0.1);
    }

    #test-3:hover {
        background: rgba(0,0,0,0.1);
    }

See [this fiddle][1].

The only option I saw is to make another image, with overlay, preload it using JavaScript and then use `.the-div:hover { background: url(&#39;the-new-image&#39;); }`. However, I&#39;d like a CSS-only solution (neater; less HTTP requests; less harddisk). Is there any?

[1]:http://jsfiddle.net/325Ft/1/

Overlay a background-image with an rgba background-color

I dont want to use html &lt;img&gt; tag. This is my css. I am using bootstrap 3.0.

	background:url(&#39;images/ip-box.png&#39;)no-repeat;
	background-size:100%;
	height: 140px;
	display:block;
	padding:0 !important;
	margin:0;

On 100% zoom this is OK. but when I zoom in at 180% approx, the image will be short from top and bottom, I want some css tricks. 

How to use responsive background image in css3 in bootstrap

I&#39;ve got an HTML document hosted on a remote web server. I&#39;m trying to have one of the elements on the web page use an image file from my local file system as its background image. No luck with Chrome, Safari or Firefox (haven&#39;t tried IE).

Here&#39;s an example of what I&#39;ve tried so far.

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
        &lt;head&gt;
            &lt;title&gt;Experiment&lt;/title&gt;
            &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
            &lt;style&gt;
                html,body { width: 100%; height: 100%; }
            &lt;/style&gt;
        &lt;/head&gt;
        &lt;body style=&quot;background: url(&#39;file:///Users/username/Desktop/background.png&#39;)&quot;&gt;
        &lt;/body&gt;
    &lt;/html&gt;

If I inspect the body element using my browser&#39;s web inspection tool, and select &quot;Open image in new tab&quot; the image is there. So the browser is fully capable of getting at the image file using the given URL.

Is what I&#39;m trying to pull off at all possible, or is this a security feature of the browser trying to block external domains from accessing the user&#39;s local resources?

All Background Image Solutions on Gang of Coders

Total of 43 Background Image Solutions