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
49
votes
20 answers

CSS Background Image Not Displaying

I have an HTML file with a subdirectory called img with an image called debut_dark.png. In my CSS file, I have: body { background: url(/img/debut_dark.png) repeat 0 0; } The HTML file has the body tag and does include the CSS file…
darksky
  • 20,411
  • 61
  • 165
  • 254
48
votes
20 answers

The way to use background-image in css files with Django

I'd like to use an image file as a background-image on Django. But I do not know how. First, I read this and tried to write like following this in a css file. #third{ background: url("img/sample.jpeg") 50% 0 no-repeat fixed; color: white; …
yamachan
  • 1,029
  • 2
  • 12
  • 28
45
votes
7 answers

Why doesn't min-height not work on my page?

I have a gradient applied to the background of the body element. Then I have a container (right after body) that has a background .png image applied to it. The gradient always expands to at least 100% window height but the container (#body2) does…
Dave
  • 8,879
  • 10
  • 33
  • 46
42
votes
9 answers

CSS background-size: cover + background-attachment: fixed clipping background images

I have a list of figures containing background images. Something like the following:
  • …
Godwin
  • 9,739
  • 6
  • 40
  • 58
42
votes
6 answers

CSS blur on background image but not on content

I did this example. I'm trying to blur the background image, but the main content is blurred too (the ) How can I blur the background without blurring the content?
itsme
  • 48,972
  • 96
  • 224
  • 345
41
votes
2 answers

How to reference JSF image resource as CSS background image url

I often, change the images of my buttons using the image attribute, but someone told me that it is a good practice to do it using .css I tried but i cant, what i am doing wrong? This is what i did: 1-The resources of my project are stored like…
javing
  • 12,307
  • 35
  • 138
  • 211
41
votes
9 answers

Multiple background images positioning

I've got three background images, all of width 643px. I want them to be set out like so: top image (12px height) no-repeat middle image repeat-y bottom image (12px height) no repeat I can't seem to do it without getting them to overlap (which is a…
Juddling
  • 4,594
  • 8
  • 34
  • 40
40
votes
3 answers

CSS background-size cover and background-position

HTML: #backgroundproduct { position: fixed; top: 5%; left: 5%; width: 90%; height: 90%; z-index: 12; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; …
Ivo
  • 2,588
  • 6
  • 25
  • 43
39
votes
4 answers

Background Image Placement

I'm trying to set my root LinearLayout element (which is set to fill_parent in both dimensions) to have a background image which is always located in the lower left corner of the screen no matter the orientation of the device. It would be excellent…
Ryan
  • 6,756
  • 13
  • 49
  • 68
39
votes
2 answers

CSS, background-repeat distance

I want to set a background-image but with an specific distance between the repetitions. For example, I have this image to become a background-image: And I want to fix the repetitions in a pattern like this: Check the JSFiddle playground I'm…
fguillen
  • 36,125
  • 23
  • 149
  • 210
39
votes
2 answers

Border-radius on background-image

Is it possible to add border-radius on background-image ?
Michał Urban
  • 465
  • 2
  • 5
  • 7
38
votes
13 answers

Changing Background Image with CSS3 Animations

Why this isn't working? What am I doing wrong? CSS @-webkit-keyframes test { 0% { background-image: url('frame-01.png'); } 20% { background-image: url('frame-02.png'); } 40% { background-image: url('frame-03.png'); } 60% { …
Charles Thomason
  • 381
  • 1
  • 3
  • 4
38
votes
10 answers

How do you make a background image scale to screen size in swift?

I'm trying to make a UIView image for my background in swift using pattern image. The code I have works well except for the fact that I want the image to take the whole screen. My code looks like this: self.view.backgroundColor =…
GuiGui23
  • 4,035
  • 4
  • 19
  • 17
38
votes
3 answers

How to shift a background image with css

I wanted to put a border around a table which has a background image. The border works fine, but when I do this (it is an 8px border) the background image gets cut off by the border. Am I able to shift the background image to start 8px to the right…
Ankur
  • 50,282
  • 110
  • 242
  • 312
35
votes
3 answers

Use a DIV as a background for another element

If I have a div that contains images and text, is it possible to use this div's content as a background for, let's say, a section ? For example, something like this: HTML:
This is a…
Seeven
  • 969
  • 1
  • 8
  • 24
1 2 3
…
99 100