Stack Overflow
Stack Overflow

Questions tagged [background-image]

The background-image CSS property sets one or more background images for an element.

Description

The CSS background-image property sets one or several background images for an element. The images are drawn on successive stacking context layers, with the first specified being drawn as if it is the closest to the user. The borders of the element are then drawn on top of them, and the background-color is drawn beneath them.

Value:          <url> | none | inherit
Initial:        none
Applies to:     all elements
Inherited:      no
Percentages:    N/A
Media:          visual
Computed value: absolute URI or none

Examples

#example { 
    background-image: url("images/darkpattern.png"); 
}

References

  1. background-image - W3C Specification
  2. background-image - MDN Link
6010 questions
1397
votes
20 answers

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

How do I use CSS3 gradients for my background-color and then apply a background-image to apply some sort of light transparent texture?
Ronald
  • 16,033
  • 9
  • 27
  • 29
777
votes
31 answers

When to use IMG vs. CSS background-image?

In what situations is it more appropriate to use an HTML IMG tag to display an image, as opposed to a CSS background-image, and vice-versa? Factors may include accessibility, browser support, dynamic content, or any kind of technical limits or…
system PAUSE
  • 37,082
  • 20
  • 62
  • 59
541
votes
22 answers

How to apply a CSS filter to a background image

I have a JPEG file that I'm using as a background image for a search page, and I'm using CSS to set it because I'm working within Backbone.js contexts: background-image: url("whatever.jpg"); I want to apply a CSS 3 blur filter only to the…
fox
  • 5,569
  • 3
  • 16
  • 13
488
votes
8 answers

Fit background image to div

I have a background image in the following div, but the image gets cut off:
Is there a…
Rajeev
  • 44,985
  • 76
  • 186
  • 285
484
votes
12 answers

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

I was looking at the source of a greasemonkey userscript and noticed the following in their css: .even { background: #fff…
Dimitar Christoff
  • 26,147
  • 8
  • 50
  • 69
424
votes
21 answers

CSS Display an Image Resized and Cropped

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. I can resize with html img property and I can cut…
InfoStatus
  • 6,983
  • 9
  • 41
  • 53
321
votes
8 answers

Can I have multiple background images using CSS?

Is it possible to have two background images? For instance, I'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…
Rudd Zwolinski
  • 26,712
  • 17
  • 57
  • 60
296
votes
19 answers

Semi-transparent color layer over background-image?

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 "layer" over. Below is what I tried but which did not work. Is there a way to put the…
Marc
  • 9,217
  • 21
  • 67
  • 90
227
votes
19 answers

Responsive css background images

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't have any idea on how to do this except for one thing that I can think of but it's quite…
jochemke
  • 2,447
  • 3
  • 15
  • 10
219
votes
13 answers

CSS: background image on background color

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…
mkn
  • 12,024
  • 17
  • 49
  • 62
212
votes
1 answer

Fill SVG path element with a background-image

Is it possible to set a background-image for an SVG element? For instance, if I set the element class="wall", the CSS style .wall {fill: red;} works, but .wall{background-image: url(wall.jpg)} does not, neither .wall {background-color: red;}.
jbochi
  • 28,816
  • 16
  • 73
  • 90
204
votes
8 answers

How to rotate the background image in the container?

I want to rotate the image which is placed in the button of scrollbar in Chrome. Now I have a CSS with this content: ::-webkit-scrollbar-button:vertical:decrement { background-image: url(images/arrowup.png); -webkit-transform:…
priya
  • 2,057
  • 2
  • 13
  • 3
192
votes
10 answers

Why can't I use background image and color together?

What I am trying to do is to show both background-color and background-image, so that half of my div will cover the right shadow background image, and the other left part will cover the background color. But when I use background-image, the color…
Yasir
  • 3,817
  • 10
  • 35
  • 41
192
votes
12 answers

How to completely remove borders from HTML table

My goal is to make an HTML page that is similar to a "photo frame". In other words, I want to make a blank page that is surrounded by 4 pictures. This is my code: …
yazanpro
  • 4,512
  • 6
  • 44
  • 66
156
votes
13 answers

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

This question was asked before 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…
DisgruntledGoat
  • 70,219
  • 68
  • 205
  • 290
1
2 3
…
99 100