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
23
votes
4 answers

Place background image outside border of containing div

I am trying to set a background image to be outside the actual containing div. .expandable { background: transparent url('./images/expand.gif') no-repeat -20px 0px; } so the "expand" image should…
fearofawhackplanet
  • 52,166
  • 53
  • 160
  • 253
23
votes
3 answers

Width of element with 'white-space: nowrap' doesn't adjust to child content

I am trying to create a horizontally scrolling pane with (tiling) background image, using overflow-x: scroll & white-space: nowrap. The pane spans an arbitrary number of elements. CSS: .frame { overflow-x: scroll; } .pane { background-image:…
coprolit
  • 333
  • 1
  • 2
  • 6
22
votes
2 answers

Fill SVG path element with a background image without tiling or scaling

I'd like to do something very much like Fill SVG path element with a background-image except that the solution offered there will tile the image to fill the the entire background area. I don't want that. If the image doesn't fill either the entire…
Michael
  • 325
  • 1
  • 3
  • 9
22
votes
1 answer

HTML5 canvas background image repeat

I have a html5 canvas that draws a sound wave. I have set the background as an background image, however, I want this background image to repeat. Can anyone tell me how I would do this and what I need to add into my code: var backgroundImage = new…
Sam Skirrow
  • 3,647
  • 15
  • 54
  • 101
21
votes
8 answers

Restart animated GIF as background-image

Is it possible to restart an animated GIF used as background-image? Consider this HTML:
And this style: #eyes.blink { background-image:url('blink.gif'); } I would like the blink.gif animation…
hpique
  • 119,096
  • 131
  • 338
  • 476
21
votes
9 answers

Tailwind css backgroundImage doesn't work for me

all, I'm trying to make tailwinds backgroundImage solution work, and I found help for many other tailwindcss problems here or on github, but not for this. It's not a complicated task, but still doesn't work. So as in the documentation, I want to…
Repag
  • 321
  • 1
  • 2
  • 5
21
votes
2 answers

Can a background image be set on a Winforms TextBox?

Is it possible to change the background image of a Windows Forms TextBox in C#? There is no BackgroundImage property. Should I override the Paint method somehow?
Jan Turoň
  • 31,451
  • 23
  • 125
  • 169
21
votes
4 answers

How to make background-image accessible?

If you are using an inline tag there is the alt= attribute and other aria-* attributes you can use to make the image accessible. But if you are using a background-image: url(...), is there any sort of guidelines on how you can make this…
Jake Wilson
  • 88,616
  • 93
  • 252
  • 370
21
votes
2 answers

Calculating Viewport Height on Chrome Android with CSS

So I noticed that mobile Chrome calculates the address bar into the viewport height. Because of this using height: 100vh on an element doesn't work because when the address bar scrolls the viewport height changes. I was actually able to find a…
Bryan Willis
  • 3,552
  • 1
  • 25
  • 34
20
votes
4 answers

Fading in a background image

I have a web page that uses a large image for its background. I was hoping to use jQuery to load the image once it is downloaded (basically the way that bing.com loads its background image). Is this possible with jQuery? If so, is there a plugin…
Villager
  • 6,569
  • 22
  • 65
  • 87
20
votes
3 answers

how can I align to middle by height

I want to create image box(with image). It's ugly when text is in the top of box. How can I align text to middle? I tried to use vertical-align, but it seems, that it don't works Demo of my code EDIT: Your solution works fine with short…
RiaD
  • 46,822
  • 11
  • 79
  • 123
20
votes
2 answers

Making a dotted grid with CSS

I want the whole body to have a dotted grid body { background-image: radial-gradient(black 1px, transparent 0); background-size: 40px 40px; } The problem is that I want to shift it so that a dot is placed at the point (0, 0), i.e. the…
Eugene Barsky
  • 5,780
  • 3
  • 17
  • 40
20
votes
5 answers

How to make background-image with linear-gradient work on IE 11?

Any idea how I can make background-image with linear-gradient to work on IE 11? The following code works fine on IE 10 but doesn't work on IE 11. background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F); I can make linear-gradient…
Vadim
  • 21,044
  • 18
  • 65
  • 101
20
votes
2 answers

Is an image within a noscript tag only downloaded if Javascript is disabled?

Consider the following example: Does the client only download the image file if they have Javascript disabled? (I'm aware the client can only see the image if Javascript is disabled…
user2045031
  • 201
  • 1
  • 2
  • 3
19
votes
9 answers

Dark mode does not switch to a Dark mode background in Xcode

I have set up different backgrounds for 'Light/Dark Appearance' But when switching between Light/Dark mode within Xcode, my background always uses image from 'Any/Light Appearance'. Only colours set for icons changes accordingly. FYI: I'm…
marika.daboja
  • 881
  • 13
  • 27
1 2 3
…
99 100