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
1
vote
2 answers

CSS Sprite Full Page Background: background-position

I have an image, the top 80px of which I want to use for some other purpose, and remaining image, I want to set as a full page background image. I tried setting: background-position: 0px -80px but it does not work. How to properly use css sprite…
workwise
  • 1,003
  • 16
  • 33
1
vote
2 answers

Css multiple background images with margin

i'm trying to use 2 background images on a div, im using theese style for this background:url(../images/bg1.png),url(../images/bg2.png); but all images are like position absolute, they are on each other so i use background-position:0px 0px,40px…
Malixxl
  • 525
  • 2
  • 9
  • 19
1
vote
1 answer

Blackberry Curve 9300 and Bold 9650 - Support CSS Background Images in native Browser?

I'm developing a website and a sizable portion of the viewers will be using the Blackberry Curve 9300 and Blackberry Bold 9650. I've noticed that CSS background images are not displaying on these two devices. It doesn't matter what element I apply…
LearnWebCode
  • 1,361
  • 3
  • 12
  • 22
1
vote
3 answers

mailto link on image not working in IE

When a user clicks on the "send email" button, their default email application opens with the subject line: Request Information". Can anyone tell me why this "mailto:" code will not work in IE7/8? It works correctly in FF, Chrome and Safari. I…
Chris22
  • 1,973
  • 8
  • 37
  • 55
1
vote
1 answer

Joomla Background Image?

I'm sure there is a very simple explanation for this but... How do I add a background image to my Joomla site? I am using a modified version of Atomic. The obvious thing to do would be to simply go into the template.css file and add a…
Peter
  • 311
  • 1
  • 7
  • 19
1
vote
2 answers

Make HTML button same size as its background

Usually, you make a button with a given size:
noober
  • 4,819
  • 12
  • 49
  • 85
1
vote
1 answer

How to add padding to a reapeating CSS background without padding the content?

Is there any way to pad a repeating background image that will not also add padding to the content? I have a 3 column layout created using floats, and a clearing element to ensure the container is the right height. Here is the code for…
shanethehat
  • 15,460
  • 11
  • 57
  • 87
1
vote
1 answer

Should centered background respect paddings

Here is a snippet (if you are using Opera, check out this link). As we can see In webkit browser we can see that background image respects padding while centering, and in (at least Firefox and Opera) things go different. So, the question is…
shabunc
  • 23,119
  • 19
  • 77
  • 102
1
vote
1 answer

Having trouble spanning a background image to show in full

I have an image that I would like to show in full regardless of screen size. I pulled up the image in Photoshop to render its size (it was originally 4164 x 2667 since it was a vector) and make some changes to it. I downsized the image to about…
user686327
  • 183
  • 1
  • 11
1
vote
2 answers

Background image not centred in Firefox7 for Windows

Using Browserlab, it appears that the background image is not centred in Firefox7 for Windows on this site: http://carolineelisa.com/wp/boy/ The css I am using is below, as is a screenshot. Any ideas how I can fix this? Thanks! CSS: html { …
Caroline Elisa
  • 1,246
  • 6
  • 18
  • 35
1
vote
0 answers

downloaded image use as background image in my framelayout

I have a downloaded file and i want to use as background image in my framelayout. I use this code but it gives me an error . here is the line where i get the error: fm.setBackgroundDrawable(dr); and here is my whole code public class MyAppActivity…
1
vote
4 answers

jquery background image changing when the mouse goes accross the element

My boss has seen this on a website: http://event.photoswarm.com/ Notice how the images change as you go across the albums. The downside of this is that all the thumbnail images have to be downloaded at the start and then I guess it all then…
Richard Housham
  • 864
  • 2
  • 15
  • 34
1
vote
2 answers

Using a patternimage for a View inside an NSScrollView

I have a quite big problem, I am really not able to solve myself. The result should look like this: This image was made with photoshop and is part of the interface I try to build. In the middle you see something, that should be a list of projects,…
1
vote
4 answers

using background image for headers

I have got an image which i have to used for my headers , I cant use fixed image as the header width changes depending on the header text, therefore i did 3 slices of an image , starting which wont repeat , middle slice which will repeat with the…
Mr A
  • 6,448
  • 25
  • 83
  • 137
1
vote
3 answers

background-image animation not working in Firefox

I am using the following script to animate a sprite for the background-image for a nav div: $("li#test2").hover( function () { $(this).animate({ 'background-position-y': '-40' }, 500); }, function () { …
Nick
  • 4,304
  • 15
  • 69
  • 108