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
14
votes
2 answers

Fallback image with CSS

I have an that shows a remote image. I want it to fallback to another local image, in the case where the remote one is not reachable.
Kamafeather
  • 8,663
  • 14
  • 69
  • 99
14
votes
6 answers

Background-image not showing

I am trying to turn images that appear on the site using the tag into a background image. MY first code looked like this Html: CSS .house…
kduan
  • 639
  • 4
  • 11
  • 22
14
votes
7 answers

Resizing background sprite image to fit div

I am creating a card game . I have a sprite image of cards . Say in the sprite , each of the cards is 50px wide and 80px high . Now I have some divs where I want to place these cards . Say the Divs are 100px wide and 160px high . I have using…
geeky_monster
  • 8,672
  • 18
  • 55
  • 86
14
votes
3 answers

Background image tiles have gap between them when using SVG image. How to solve in Chrome?

When I use a SVG image as the tiled background for the body of my page, there is a slight gap between the tiles. If I switch to the PNG version of the file, it does not happen. I am using the latest version of Google Chrome for Mac – version…
Violet
  • 351
  • 1
  • 3
  • 12
13
votes
1 answer

HTML 5 File load image as background-image

is it possible to load an image via the HTML 5 File API and make it a css background-image using javascript / jquery? If it's possible, how is it done?
Maximilian Lindsey
  • 809
  • 4
  • 18
  • 35
13
votes
5 answers

UIViewController background Image

How do I set the background image of my UIViewController? What is the code to do it? Right now I have self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"image.jpg"]]; but I don't want a pattern. I want it to fill the…
CodeGuy
  • 28,427
  • 76
  • 200
  • 317
13
votes
6 answers

Adding a Video Background to iOS app signup like Instagram and Vine

I have created an app which loads up and has a Login / Signup page etc using swift. Currently I have an image as a background but would like to add code so there is a gif / mov playing in the background like in apps like vine or instagram. How can…
Robert S
  • 193
  • 2
  • 2
  • 11
13
votes
3 answers

Blurry background images after update to IE11

So this morning I got an automatic update to IE 11, after checking my eyes it appears that some of my background images are blurry. I had to check that it was not my image causing the problem, so after firing up Chrome, they were nice and crisp…
wf4
  • 3,727
  • 2
  • 34
  • 45
13
votes
2 answers

CSS3 /CSS - spinning background image

is it possible to spin a background-image in css? i can spin an element using: @-webkit-keyframes spinX { 0% {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;} 100% {-webkit-transform: rotateX(360deg);…
itsme
  • 48,972
  • 96
  • 224
  • 345
13
votes
2 answers

Is there a current or proposed way to set individual layers of multiple backgrounds?

Is anyone aware of a way to change one layer of a multi-layered background using CSS? I've been searching around but can't find any mention of current, or even proposed future specification. My thinking says there probably wont be, but the net is…
Pebbl
  • 34,937
  • 6
  • 62
  • 64
12
votes
3 answers

CSS multiple backgrounds scrolling at different speeds

I came across this website today and I was mystified: http://www.actionbutton.net/ Is he using some kind of known technique for his backgrounds that scroll at a different rate and overlap each other. I looked at the source but am pretty confused.…
ballaw
  • 1,489
  • 6
  • 20
  • 28
12
votes
5 answers

CSS background image disappearing in Chrome

This problem is only happening in Google Chrome on Mac OS X (Chrome 17). I've tested it on all the major browsers on Mac and Windows 7. Here is the page in question: http://dealsfortherich.com/drop/ As you can see, I'm loading divs via JQuery…
daSong
  • 407
  • 1
  • 5
  • 9
12
votes
2 answers

Invert/change logo on scroll

An article over on askthecssguy.com shows how to change/invert an image on scroll using fixed backgrounds: http://askthecssguy.com/articles/mike-asks-the-css-guy-about-a-scrolling-trick-with-background-images/ My goal takes this concept further by…
iamkeir
  • 3,222
  • 2
  • 21
  • 22
12
votes
1 answer

Did Chrome 72 break 'data:image/svg+xml;utf8' for css background svgs?

My svgs are specified in css like this: background-image: url('data:image/svg+xml;utf8,
Brandon Morrison
  • 133
  • 1
  • 7
12
votes
3 answers

Multiple background-images and a background-color

Suppose I want to render an arrow in CSS, which should have a head, a tail and flexible width so it can contain text. I can of course create multiple divs to get what I want, but how can this be done in CSS3? I can use multiple background…
Frederik Wordenskjold
  • 10,031
  • 6
  • 38
  • 57
1 2 3
…
99 100