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

Fixed background like Twitter?

On every Twitter profile page there is fixed background image. How could I do the same on my site? I would like to find a solution in CSS
Akos
  • 1,997
  • 6
  • 27
  • 40
1
vote
1 answer

center a background image to a div that has min-width, even when page is narower than the div

html
Lorem Ipsum...
css #outer { background: url('mypic.jpg') no-repeat center top; } #inner { width: 960px; margin: 10px auto; } This code centers my background image nicely, except when my…
Sean
  • 369
  • 1
  • 4
  • 15
1
vote
1 answer

CSS: How to overlap HTML background repeat tiles?

I am creating a skin to my website that has metal brush look. I want the metal look to seamlessly extend horizontally. If a small portion of it is made to repeat, the page looks patchy as there is visible difference between left and right edges of…
Null Head
  • 2,877
  • 13
  • 61
  • 83
1
vote
2 answers

setting browser-specific CSS properties with jQuery

I'm trying to modify gradient values in the background-image property and I can't :( data = 'ff55dd'; $(".el").css({ 'background-image' : '-webkit-gradient(linear, left top, left bottom, from(#' + data + '), to(#aa1133))', …
Alex
  • 66,732
  • 177
  • 439
  • 641
1
vote
3 answers

CSS background-image

Are there any common pitfalls to using this attribute? I can't seem to get it to work. The image is in the same directory as my HTML page and I checked the absolute path which is correct. I also tried setting the background to a random color to…
Sam
  • 2,309
  • 9
  • 38
  • 53
1
vote
1 answer

Images in IE 8 are not showing up

I'm having trouble getting the let hand side tabs here to show up properly in IE 8: http://dealclippings.com/deals/ They haven't been showing up since I added the "New" image and I can't seem to figure out what's up. They show up fine in all other…
Ben
  • 60,438
  • 111
  • 314
  • 488
1
vote
6 answers

preloading background image on homepage

I have a homepage that contains a huge amount of php code to populate the divs (including newsletter sign up with validation, content from a mysql database and various static images). The whole page is built on top of a background cross fade…
JD2011
  • 213
  • 2
  • 12
  • 27
1
vote
0 answers

Lion: Change Background Pictures on all Desktops

I would like to change the wallpaper on all desktops simultaneously to one picture using a shell script (basically anything shell, python, applescript, automator would be fine). Any hints? Daniel
Daniel
  • 11
  • 2
1
vote
1 answer

Can't get background-image:url to work

I've been trying to get an image to work with a navigation menu I'm working on. However, it seems no matter what I try, it doesn't display. I've tried adding variations of... display:block; background-position:top…
kokoro1280
  • 13
  • 1
  • 5
1
vote
1 answer

Multiple Backgrounds in Multiple Selectors

I'm trying to create a CSS3 button which includes an image using multiple background. I want to use the same basic style (based on Twitter's BootStrap CSS framework), but apply a different image by adding a class. I want a gradient as the base,…
Echilon
  • 10,064
  • 33
  • 131
  • 217
1
vote
2 answers

CSS: Resizing
  • background image from a sprite

    • Is it possible I can resize a background image of a
  • of which is in a sprite? I have this HTML:
  • and this is the CSS: .bg_image {background:url('sprite.png') no-repeat; background-position:-422px…
    jQuerybeast
    • 14,130
    • 38
    • 118
    • 196
    1
    vote
    1 answer

    Background Image not showing despite having correct path as URL

    I'm trying to add a background image in my React Project, but it's not showing up despite having correct relative path as URL. Here is my "App.js": import "./styles.css"; export default function App() { return (
    Fuaad
    • 197
    • 15
    1
    vote
    1 answer

    Set an "odd" image as a responsive full screen background, showing the entire image in React/RedwoodJS

    Somewhat odd request here - I need to set an image as a background, for which I would normally use cover, but I need all edges of the image visible at all times (image attached). I've tried all the traditional approaches, but I'm starting to think…
    Nick Matthews
    • 91
    • 1
    • 5
    1
    vote
    0 answers

    Hide text on animation, on a dynamic SVG background

    I've faced a problem where I want to hide text and then reveal it uppon animation, but I find it hard to do on a dynamic SVG background. Everything is in Vue LandingPage.vue