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
1 answer

Android button with image background and text and stateful functionality

I want to create "button" in XML layout (if possible) which has background image based on state (this image is NOT 9-patched) and with text. Which component to use? My button_states.xml looks like:
zmeda
  • 2,909
  • 9
  • 36
  • 56
1
vote
2 answers

Issues with using a negative margin in background images to display bullets (IE6 and 7)

The subject here is the use of negative margins in bulleted lists to display an image in the gutter to the left of a title element: I found a Simplebits article which explains why this is a good solution for headings (it's normally used to shift…
Donald Jenkins
  • 3,485
  • 8
  • 33
  • 35
1
vote
1 answer

gap appears in background image while zooming in

I have a design with lots of round borders and I have to code with CSS2.1. So I have coded with divs giving them backgrounds with dimensions. The design looks fine when the browser window is in normal state, but when I zoom in about 2px gap appears…
Karine
  • 587
  • 1
  • 11
  • 24
1
vote
3 answers

How to change the background image of a button using JavaScript?

I want to change the background image of a button using Javascript. Here is what I am currently trying, but it is failing. HTML code -
CodeBlue
  • 14,631
  • 33
  • 94
  • 132
1
vote
3 answers

Placement of 2 images as the background on one body

Dear visitors stackoverflow! I can not solve a simple problem: Body given the background of the picture "1.jpg" (it is automatically pressed against the header), I still need to put a picture - "2.jpg" to be pressed on the contrary to the footer.…
user1103744
  • 2,451
  • 4
  • 20
  • 20
1
vote
1 answer

Where does Firebug report that a CSS specified background-image failed to load?

I've been clicking through Firebug's interface and can clearly see under the "Net" tab when requests return fail responses; however, I'm certain that a url in a CSS file is incorrect and the failure to load isn't reported here. I've got a lot of…
user56512
1
vote
2 answers

jquery to change css background position on multiple backgrounds

I am trying through jquery to change the background images position of an element depending on resolution. The code: var pwwidth = $(window).width(); var pwheight = $(window).height(); var bg1posx = pwwidth - $('h1.portofolio').width(); var bg1posy…
Chris
  • 71
  • 1
  • 11
1
vote
1 answer

Combining background image and background colour with transparent element

I'm having a bit of an issue with some CSS. In the main content section I am using a background image, within that image is a transparent element which shows the background below it. This is fine and does what I want. The issue is that I want to…
1
vote
1 answer

css make background image appear both at left and right of element

I have an unordered list in a navigation with a separator like so: background: {url("images/navseperator.png") no-repeat scroll right top transparent} This works fine but I want to add the same image to the left something like so: background:…
Doug Fir
  • 19,971
  • 47
  • 169
  • 299
1
vote
2 answers

Background Image appears to be "flickering" in Chrome (I don't want it to)

If you look at http://www.disk-edits.com.au/index.php in Chrome (vs Firefox for example), the background appears to be shimmering/flickering/fuzzy. The image appears to move from side to side. Whatever you want to call it, it hurts my eyes. I want…
Richard
  • 909
  • 1
  • 8
  • 13
1
vote
1 answer

IE 9 rounded corner with background picture

Is there any solution for this problem? When using rounded-corner in IE9 with background picture (repeating by x) the background is standing out. Everything is OK in other browsers(without shadow!) https://i.stack.imgur.com/XLIer.png css: …
1
vote
1 answer

Body background image and jquery

I am knew to jquery and I am having a bit of trouble with trying to get something working. Basically I have a wordpress site, on each page is a different background image for the body tag. I want to be able to toggle on a button and then the body…
PK333
  • 147
  • 1
  • 3
  • 13
1
vote
1 answer

WP7 Tile BackgroundImage Won't Update

I'm trying to get the application to update the application tile, I'm basically copy pasting from the sdkTilesCS demo project (Tile Sample on this page http://msdn.microsoft.com/en-us/library/ff431744(v=VS.92).aspx). The application title and count…
ameer
  • 2,598
  • 2
  • 21
  • 36
1
vote
2 answers

Select and change a specific background-image with jQuery

I am trying to select a certain value from a multi-element background-image property such as background-image: url(a.jpg), url(b.jpg), url(c.jpg) with a single jQuery expression. The current solution is to replace the complete property with…
arvidkahl
  • 852
  • 8
  • 15
1
vote
1 answer

Centering an Absolute Image using %

I am having some problems using percentages to horizontally center an absolutely positioned image. It it for a fluid site and so I need the erasers.png image to be centered in the background. I need to be able to control its size in percentages, so…
Nate Gines
  • 345
  • 3
  • 14