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
35
votes
6 answers

How to verify background (css) image was loaded?

I have the following CSS class that I'm applying on a tag: .bg { background-image: url('bg.jpg'); display: none; } How can I tell with JavaScript/jQuery that the background image finished loading?
thedp
  • 8,350
  • 16
  • 53
  • 95
33
votes
4 answers

background-size:100% 100%; doesn't work properly in Chrome

I'm using an svg image as a background. I'm trying to use CSS3's background-size: 100% 100%; but it doesn't seem to work, even in browsers which should support it (like Chrome). If you look at this site you'll see the #special-post article (to the…
emersonthis
  • 32,822
  • 59
  • 210
  • 375
33
votes
2 answers

css difference between background: and background-image:

quick simple question In the following example of an external CSS page; body { background-image: url(background.jpg); } header { background: url(background.jpg); } I understand they are effecting different element selectors, my question is…
epicT
  • 353
  • 1
  • 3
  • 6
31
votes
7 answers

How to override background image defined in CSS with another CSS?

I have a 'Core.css' which defines a page background image, along with the theme, for the site. But for a specific page I want to change just the background. Any suggestions on how this can be achieved in a separate CSS file? The HTML for the page…
aateeque
  • 2,161
  • 5
  • 23
  • 35
31
votes
4 answers

How can I apply a background image to a text input without losing the default border in Firefox and WebKit browsers?

For some reason most modern browsers will stop applying their default input border style to text boxes if you give them a background image. Instead you get that ugly inset style. From what I can tell there's no CSS way to apply the default browser…
Jade Ohlhauser
  • 483
  • 1
  • 4
  • 7
30
votes
2 answers

Using percentage values with background-position on a linear-gradient

Is there any way to make background-position take percentage values? Currently my button only works with an explicit values for width and background-position. body { min-height: 100vh; display: flex; flex-direction: column; …
Mo.
  • 26,306
  • 36
  • 159
  • 225
30
votes
7 answers

Change WPF window background image in C# code

I have a couple of Images configured as application resources. When my application starts, the background of the main window is set via XAML:
biasedbit
  • 2,860
  • 4
  • 30
  • 47
30
votes
2 answers

Background image stretch y-axis only, keep repeat-x

I have an image set as a background image of a div. The DIV size is changing and inside their is the image which is a gradient. CSS: #scroller_shadow{ background-image:url(../img/ui/shadow.png); background-repeat:repeat-x; …
Liron Harel
  • 10,819
  • 26
  • 118
  • 217
29
votes
9 answers

Hide without removing background image

Is there a way to hide the background image in CSS without removing it? For convenience, I'm using CSS to change whether or not it is displayed, and relying on a class to make it show. So, by default, it would be hidden, but the class would make it…
student
  • 291
  • 1
  • 3
  • 3
29
votes
3 answers

Can we solve the table row background image problem, in chrome, in multi celled tables?

It is frequently asked – but I haven’t seen a good answer yet (and I looked). If you set a background image in CSS to a table row- the image will repeat itself in every cell. If you set the position: relative (for the row) and set the…
Ya'el
  • 291
  • 1
  • 3
  • 6
29
votes
2 answers

how do I zoom a background image on a div with background-size

I want a div element to stretch across that is 33% width with a background image done in css background-image:url(); background-size:cover How do I animate a zoom-in of the image of the background in the div on mouseover or mouseneter, is there a…
ONYX
  • 5,679
  • 15
  • 83
  • 146
28
votes
6 answers

Adding a background image in Ruby on Rails 2 in CSS

I generated a scaffold in ruby and I want to insert a background image to every page on the site but Im not sure what the link to the image should be. my image is in app/assets/images/"dep.jpg" this is what i have but it isnt…
Dan
  • 8,263
  • 16
  • 51
  • 53
28
votes
4 answers

css with background image without repeating the image

I have a column (lets assume the width is 40px) and there I have some rows. The height of the rows depends on the length of text (if the text is long then there is a break line and therefore the height increases). Now I want to display an icon in…
mkn
  • 12,024
  • 17
  • 49
  • 62
28
votes
10 answers

CSS: background image does not fill when scrolling

working on a very small site which loads in one go, so there is a div which holds all the background images, and on top of that (i.e. higher z-index) there is a content div which holds everything. I can switch backgrounds easily based on what…
rekindleMyLoveOf
  • 375
  • 1
  • 4
  • 13
27
votes
7 answers

iOS: Preparing background images for applications

Mostly every iOS application has a view with an image as background. Is there any image sizing guide out there? For example here is an iOS screen designed in Sketch: As you can see there is a background image. Now there are lots of Apple devices…
Nikita Zernov
  • 5,465
  • 6
  • 39
  • 70
1 2 3
…
99 100