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
17
votes
3 answers

CSS Background-Image Path Issues

In amongst my CSS I have the following: #framecontentTop{ position: absolute; top: 0; left: 120px; right: 0; height: 100px; overflow: hidden; background-image: url(/Users/myname/Website Project/logo.jpg); color: white; } Where the path to the image…
Deacon
  • 173
  • 1
  • 1
  • 4
17
votes
1 answer

CSS Background Gradient with offset

I applied a gradient as background image to my body. Then I added 255px offset at the top using background-position:0 255px;. It looks quite good except one little issue: of course the gradient does not end at the bottom of the page but 255px…
Julian F. Weinert
  • 7,474
  • 7
  • 59
  • 107
17
votes
5 answers

Position element over background image. But the BG img changes size with the window. CSS

I have a background image which changes size to the windows size, and I need to position an element on it so that it is always in the same place relative to the background image. HOW!? CSS background:url("http://placehold.it/100x100") no-repeat…
Dustin Silk
  • 4,320
  • 5
  • 32
  • 48
16
votes
1 answer

css box shadow + transparent background images = intuitive breakdown

I have a button image I'm using as a background image for some links. The background image has rounded corners. I want to use a css drop shadow instead of putting the drop shadow in the image The problem is, the drop shadow appears to be drawn…
doub1ejack
  • 10,627
  • 20
  • 66
  • 125
16
votes
1 answer

Resizing background-image always proportionally to scale with a center point

I want to be able to reproduce the behavior of this website's image when resizing. It seems like the background-image has a center point where the image start to crop when it cannot keep its proportion scale. Here is an…
Sam Bellerose
  • 1,782
  • 2
  • 18
  • 43
15
votes
4 answers

Change color of SVG background-image (Bootstrap 4 carousel)

I have a BS 4 carousel with next/prev controls which works so far. I have a light background so I would like to change the color of the controls (currently white). HTML:
15
votes
7 answers

Change the body background image with fade effect in jquery

Hey i want to fade in a new background image let´s say every 60 seconds. I´ve set the background image like this: body {background-image: url(background.jpg);} Now i want to change it, so after 60seconds it changes to background2.jpg, then after 60…
Marc Ster
  • 2,276
  • 6
  • 33
  • 63
15
votes
3 answers

How to use 100% CSS background-image with scrolling content?

I want to create a site with a background image that always fills the entire window, even if the content can scroll vertically. I have created this JSFiddle using background-size:cover to scale the background-image to the window. It works, as long…
Kokodoko
  • 26,167
  • 33
  • 120
  • 197
15
votes
3 answers

Responsive background image in div full width

I'm trying to figure out how to make a background-image in a div full width and responsive. The background-image is expanding across the width of the page (and is responsive), but the height of the image isn't its full height. It seems like it's…
Drew
  • 151
  • 1
  • 1
  • 3
14
votes
2 answers

Set an Image object as a div background image using javascript

I want to load 4 images from background showing a load bar to the client and when the images will be downloaded i want to set them as background images to 4 div blocks. I am looking for something like this. var myImages = new Array(); for(var i = 0;…
Georgios Syngouroglou
  • 18,813
  • 9
  • 90
  • 92
14
votes
2 answers

Android image background repeat

I have a image used for a LinearLayout background Let's say image has 20x100 px I want to make the image repeat only on x axes ... something like this in css background-repeat:repeat-x; The LinearLayout is kinda big (1024 x 680 px) so my image…
tinti
  • 1,455
  • 8
  • 23
  • 39
14
votes
4 answers

Flutter white flicker when pushing route before backgroundImage

In my flutter app, after the splash screen animation is finished, it pushes to the HomeRoute. The HomeRoute has a backgropundImage which is intended to cover the whole screen: HomeRoute.dart: @override Widget build(BuildContext context) { …
codeKiller
  • 5,493
  • 17
  • 60
  • 115
14
votes
13 answers

CSS background-image not working

I don't know what is going on but it seems that the background image isn't loading. test.html:
Twidizle
  • 209
  • 1
  • 5
  • 8
14
votes
1 answer

CSS - Background image stretch horizontally and repeat vertically?

Using background-size: cover I am able to make the background stretch to fit the full width of the page. Using repeat-y I am able to make the background repeat or tile vertically, to the full height of the page. Is there any way to combine these two…
user35358
  • 331
  • 2
  • 3
  • 9
14
votes
5 answers

Full screen background image in React Native app

I'm trying to set a full background image on my login view. I found that question here in Stackoverflow: What's the best way to add a full screen background image in React Native So I did it like there, but it didn't work: var login =…
JV Lobo
  • 5,526
  • 8
  • 34
  • 55
1 2 3
…
99 100