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

Background size on iOS

I've spent the morning doing research on the following issue. I'm making a one page site, using a lot of images. I'm aware that Safari is known for its weird handling of background-attachment:fixed, but that's working fine; my problem is…
Merijndk
  • 1,674
  • 3
  • 18
  • 35
11
votes
3 answers

Background image on a button disappears on mouse over

In my WPF window application, when I take the mouse over my button, the background image on the button disappears and the button appears as if it does not have any image. What I want is, when the mouse is on the button, or when the button is…
WAQ
  • 2,556
  • 6
  • 45
  • 86
11
votes
2 answers

Can't configure background image for DMG installation using CMake

I am working with CMake 2.8.10.2 on Mac OS X 10.7.5. I've configured CMake to build a simple application with Xcode that creates an empty window. I then tried to configure CMake to build a DMG installation of the program specifying a background…
Tron Thomas
  • 871
  • 7
  • 20
11
votes
2 answers

Android WebKit focused textarea won't draw background image

Android WebKit draws a white background + border on a textareas and inputs when they have focus. How do I stop it from doing that? I've tried changing -webkit-tap-highlight-color, -webkit-appearance, -webkit-backface-visibility, outline, and a…
Clayton Rabenda
  • 5,229
  • 2
  • 19
  • 16
11
votes
1 answer

can you create space between background image repeats?

Is it possible to repeat a background image, but specify a number of pixels before the next repeat starts. i.e. background: url(img.png) [after 40px] repeat-x; I don't want to add empty space to the image.
gcoulby
  • 534
  • 2
  • 10
  • 20
11
votes
4 answers

Apply "background-size:cover" to Twitter Bootstrap Carousel slides

I am working with a basic Bootstrap Carousel with three slides. Before I implemented the slider, I had one static image via css background-image of its respective div. In my CSS, I was using background-size:cover, and really liked the way the image…
Betafresh Media
  • 177
  • 1
  • 2
  • 11
10
votes
4 answers

Can a image tag in html z-index behind a css background image?

I have a css background image that I want in front of my img tag. The css background image has a z-index of 1, and the img tag has a z-index of 0. Am I allowed to put an img tag behind the css background with the z-index or will a css background…
Dennis Martinez
  • 6,344
  • 11
  • 50
  • 67
10
votes
5 answers

CSS transparent background image using "data:"

I've seen on some sites that you can include images in CSS using a "data" keyword: .stuff { background: transparent url(data:image/gif;base64,SOMEWEIRDCODEHERE) repeat center top; } the weird code looks like a base64 ecoded string…
Alex
  • 66,732
  • 177
  • 439
  • 641
10
votes
2 answers

Save Canvas with selected background

I am working with canvas, right now I can save into DB and I can change the background image to one I choose of a image list. My problem is when I tried to save the canvas with the background the saved image just show me the draw but doesn't the…
asterix_jv
  • 824
  • 1
  • 14
  • 35
10
votes
4 answers

Why doesn't my SVG background-image work?

I placed a green PNG image as background to a div and it looks like this: I used a CSS hack in order to keep the text inside the green background. So this is my code for that section: #aboutprocess { background: url("../img/tech_bg.png")…
bijoume
  • 365
  • 1
  • 7
  • 18
10
votes
1 answer

First frame of the background video doesn't show on Android

I have the following code: .background-video { position: fixed; z-index: -10; left: 50%; min-width: 100%; min-height: 100%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform:…
Alex Ljamin
  • 737
  • 8
  • 31
10
votes
3 answers

background-size transition on hover causes chrome to "shake" background image

I am trying to achieve an effect I saw recently, where background image zooms on hover. I pretty much did it with example here: https://jsfiddle.net/qyh6nbwt/ but it seems to be very shaky (you will understand what I mean by hovering over it), I'm…
Ilja
  • 44,142
  • 92
  • 275
  • 498
10
votes
5 answers

Multiple background-color layers

I wondered if it was possible to create two background-colors for a div an overlay them. I want a white background-color so that the content below this div doesn't shine through and another rgba() color painted over this white to create lighter…
user3700591
  • 195
  • 2
  • 2
  • 5
10
votes
2 answers

Why does background-attachment: fixed make background-size:cover resize to the window proportions?

If you want a header image that resizes to cover the entirety of the header but also want the background-attachment to be fixed the background image will no longer cover the containing div but will attempt to cover the entirety of the window. Here'a…
Kevin Monk
  • 1,434
  • 1
  • 16
  • 23
10
votes
1 answer

Internet Explorer 11 blur background-image with border-radius

i've a div with border-radius and a background-image, this is displayed well in all browsers except in Internet Explorer 11, where, the background-image appears blurred. How i can fix this problem?