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

Background image centered and 100% in all browsers

What is the best practice to set a background image centered and 100% (so that it fills the screen, but still retains the aspect ratio) in all browsers?
lejahmie
  • 17,938
  • 16
  • 54
  • 77
8
votes
3 answers

Make background image responsive

I want to make background image responsive both in width as well as in height so that i can run it in mobile. I have used this .your_background_class_name { width: 100%; height:auto; top: 0px; left: 0px; z-index: -1; …
insanity
  • 1,148
  • 6
  • 16
  • 29
8
votes
4 answers

CSS: Scale background image down if larger than window, keep at 100% otherwise

I'd like to deploy a background image in the body of my website that scales down with the window resolution, but does not scale up beyond it's original size (1920x1080). That way, users with smaller resolutions can still see the entire image, but…
ividyon
  • 656
  • 2
  • 6
  • 17
8
votes
8 answers

Fixed body background scrolls with the page on iOS7

I've used the following CSS to ceate a fixed body background. It works well on almost all browsers except the new iOS7. On the latter the background is not fixed anymore. It scrolls with the page. Any idea how to fix the problem? body { …
Gloria
  • 1,305
  • 5
  • 22
  • 57
8
votes
4 answers

Is there a limit to how often an element's background-image can be modified?

// Repaints the progress bar's filled-in amount based on the % of time elapsed for current video. progressBar.change(function () { var currentTime = $(this).val(); var totalTime = parseInt($(this).prop('max'), 10); // Don't divide by…
Sean Anderson
  • 27,963
  • 30
  • 126
  • 237
8
votes
4 answers

CSS: Change Cursor over background-image

I have a background image as part of a body class in CSS: body.soon1 { background-color: white; background-image: url(soon1a.png); background-position: center; background-repeat: no-repeat; } Then later on I have a javascript…
paramesis
  • 183
  • 1
  • 1
  • 5
8
votes
1 answer

Background image of UINavigationBar doesn't size correctly after orientation change on iPhone 5

Long title for hopefully a small problem. I have a UINavigationBar with a custom background image. My app will support landscape orientation as well as portrait. Landscape works well in the simulator for retina 3 inch and non-retina screens.…
Rens Verhage
  • 5,688
  • 4
  • 33
  • 51
8
votes
1 answer

Background-size: cover not scaling image in div

I have four equally sized div's set up like this:
Each is 50% of the page's width and positioned absolutely. Like this, for…
Connor
  • 1,024
  • 4
  • 16
  • 24
8
votes
4 answers

How to clip an element's background to display only a part of the image?

For clarification look at the following images. The first one is what I intend to achieve. It's a text input element with two background images, one on each side. The second image is the sprite image containing the icons I need. Now my question is,…
2hamed
  • 8,719
  • 13
  • 69
  • 112
8
votes
2 answers

Firefox not anti-aliasing scaled background svg

I'm working on a responsive design that requires the header graphic to scale with the width of the viewport. I've gone for an svg thinking that this would scale well. (I test for svg support in the full site, and replace a gif with the svg). In…
john holt ripley
  • 788
  • 11
  • 16
7
votes
6 answers

How can I set fixed position Background image in jquery mobile for iPhone app using Phonegap

I am doing a iPhone app using Phonegap & also using jquery mobile. I want to set background image for data-role=page div. In this height of page is equal to screen & hence background is set to size of screen. But the page content length is much…
Sayali
  • 593
  • 3
  • 9
  • 22
7
votes
4 answers

Why does jquery-ui-dialog uses both a background color and image for the overlay?

jquery-ui-dialog uses an overlay div for modal dialogs. The div has this style: .ui-widget-overlay { background: #AAA url(images/ui-bg_flat_75_aaaaaa_40x100.png) 50% 50% repeat-x opacity: 0.3; } Why does it specify both background color and…
ripper234
  • 222,824
  • 274
  • 634
  • 905
7
votes
4 answers

background-image is not displayed in iphone

I don't know why the 'background-image' I set works fine in all browsers but it doesn't in Iphone's safari browser (wich is the one I need), This is the relevant style for the question /************************************************** …
Toni Michel Caubet
  • 19,333
  • 56
  • 202
  • 378
7
votes
3 answers

How to use background image with tailwind in next.js?

I have a background image in the public folder named bg.png In the index.js page of the pages folder I want to use that image as a background image I have install tailwind following the documentation of their official website. I have already tried…
Nasem
  • 417
  • 2
  • 7
  • 15
7
votes
6 answers

Whats a good way to show large background images on css

I asked a question about this that was specific to my code and people were really helpful, so I picked the answer that was more susccessful, even though I did not solve my problem. I am trying to get a large css background just like livingsocial…
yogashi
  • 273
  • 1
  • 5
  • 11
1 2 3
…
99 100