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

Responsive web design : "How to resize a background image according to browser window size using CSS"?

I am creating a site where my all products images will be re-size according to browser window size so i wrote some media queries where i used one big image and re-sized it in different window size but i have one image which i used in background ,…
Jamna
  • 2,561
  • 7
  • 28
  • 22
8
votes
4 answers

CSS background image URL failing to load

I'm trying to use background image in CSS but even though I gave the full path of the image, it doesn't work. Firebug shows "Failed to load given URL". I'm sure that there is no permission problem in that folder. My CSS class is body { background:…
brsbilgic
  • 11,613
  • 16
  • 64
  • 94
8
votes
4 answers

Next.js Set background Image

I am trying to add a background image to next.js but not able to do so. I have tried many solutions inline scc, style jsx, and other techniques. Not able to write directly into the style because it give error Error: Expected a template literal or…
Sohaib Anwaar
  • 1,517
  • 1
  • 12
  • 29
8
votes
4 answers

Set the Background Image of a SurfaceView

Is there a way to set the background image of a SurfaceView? Does it have to be done in xml or can I do it all in Java - I've got something that looks like this in my constructor: Drawable sky = (getResources().getDrawable(R.drawable.sky)); …
Hani Honey
  • 2,101
  • 11
  • 48
  • 76
8
votes
1 answer

Background-repeat: space seems to stop working when parent gets too wide

I've been playing around with space and round values for background-repeat. In theory this should mean I can use a radial gradient to create a nice dotted border on an element without the dots being cut off. .test { background-repeat: space…
SpaceBeers
  • 13,617
  • 6
  • 47
  • 61
8
votes
3 answers

Change background-image of a div with fade effect every 10 seconds with jquery

I would like to create a slideshow in the header area of my page. It should change the background image every 10 seconds with a nice fade effect. And since I'm using jQuery for other stuff already I would like to use it for that as well. So my…
Gogogo
  • 81
  • 1
  • 1
  • 2
8
votes
2 answers

Relative path is not considered for background image configured in component css when ng serve Angular app

I have two div with id div1 and div2, I need to set two different background image for them, the images have the same name but located in different folders, so i configured as below, app.component.html :
Jithin Scaria
  • 1,271
  • 1
  • 15
  • 26
8
votes
4 answers

Problem with a layout background image

I am trying to set a image like background image in a layout (by xml or by code)
Jose Manuel
  • 787
  • 2
  • 8
  • 19
8
votes
2 answers

Using Raphael JS, fill an SVG element with with a background-image with an offset

I want to this this Fill SVG element with with a background-image with an offset, but using Raphael JS. Displaying an rectangle with a background image without the offset is easy. canvas.rect( positionx, positiony, width, height ).attr( …
jpbochi
  • 4,366
  • 3
  • 34
  • 43
8
votes
3 answers

Responsive & Dynamic Background Image - best practice

For a long time, when I had to create a website with a lot of different pages (and with every pages having a hero section with a different background image), I used to do like this:
Timtest
  • 390
  • 1
  • 2
  • 15
8
votes
2 answers

How do I use binary image data from Web API as background-image of DOM element (Angular)

I'm having lots of trouble trying to get an image I'm retrieving from my Web API to display as a background-image in my Angular application. The Web API's action that returns the image looks like this: /// /// Returns the medium…
Jake Smith
  • 2,332
  • 1
  • 30
  • 68
8
votes
2 answers

Make two background images responsive alongside divs with CSS

I am struggling with getting 2 background images to shrink in sync with each other, so my seat plan will work on mobile/tablets. I have tried background cover, contain, 100% and setting other div values to 100% but no joy with keeping those seats…
me9867
  • 1,519
  • 4
  • 25
  • 53
8
votes
7 answers

Force div to have the size of background image

When using a background image on a Div I am not able to display the full height of the image, neither using height:auto; or height: 100%. Why so? How can I solve the problem? I have created a JS Fiddle here: https://jsfiddle.net/2d0npz2v/5/ body,…
MeV
  • 3,761
  • 11
  • 45
  • 78
8
votes
4 answers

How to use CSS background-attachment in tag?

How would you use the CSS style background-attachment and apply it to an tag? CSS: img { background-attachment: fixed; }
user4283097
8
votes
1 answer

Print background image in IE without enable "Print background colors and images"

Is possible to print a background-image whithout enabling "Print Background colors and images" in Advanced tab of Internet Options ? I think to use a alternative way without "background-image"... Using div tag and position absolute is possible to…
Douglas V. Pasqua
  • 163
  • 1
  • 4
  • 10