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

Animate CSS background-position with smooth results (sub-pixel animation)

I'm trying to animate the background-position of a div, slowly, but without it having jerky movement. You can see the result of my current efforts here: http://jsfiddle.net/5pVr4/2/ @-webkit-keyframes MOVE-BG { from { …
Jayden Lawson
  • 2,154
  • 2
  • 21
  • 24
26
votes
6 answers

Prevent fixed-position background-image: cover from resizing in mobile browsers upon address bar hide

Sorry for a lack of example on this one, but I figure it's easy enough to understand. I have a fixed background on my site, which is currently implemented like this: #background { position: fixed; top: 0; bottom: 0; left: 0; …
addMitt
  • 951
  • 2
  • 13
  • 27
26
votes
4 answers

Java: maintaining aspect ratio of JPanel background image

I have a JPanel with a painted background image and a layout manager holding other smaller images, all of this inside a JFrame. The background image is pretty big and I want to be able to have it maintain its aspect ratio whether its on a big or…
exit_1
  • 1,240
  • 4
  • 13
  • 32
25
votes
4 answers

How to make background image shrink proportionally to fit button size in javascript?

I am making a chessboard in javascript. The chessboard's squares (buttons) were originally designed to be 60px by 60px, but now they are 40px by 40px. button { width:40px; height:40px; border: 0 } However, some of…
CodeBlue
  • 14,631
  • 33
  • 94
  • 132
25
votes
8 answers

Reference app relative virtual paths in .css file

Assume I have an "images" folder directory under the root of my application. How can I, from within a .css file, reference an image in this directory using an ASP.NET app relative path. Example: When in development, the path of ~/Images/Test.gif…
user10834
  • 271
  • 1
  • 4
  • 5
25
votes
1 answer

Can you animate a svg "background-image"?

I want to center a svg-image horzontal and vertical responsive to my window. So I decided to integrate the image in a div background. Now when i want to add stroke-dasharray's and animations with stroke-dashoffset to my svg it doesn't work. Is this…
5rsly
  • 377
  • 1
  • 3
  • 8
25
votes
13 answers

How to add konami code in a website based on html?

I was asked to implement the Konami Code in a website I'm currently working on. It should do the following: Change Background Image Play sound Bring some pop-up What's the easiest way to achieve this using javascript?
25
votes
1 answer

Image in full screen with img tag

I am using the img tag for my slider images. I need the image to be full width and height and centered inside its container. My problem is, when I resize the window width, my image becomes small and its height doesn't follow the window height. I…
Anju Aravind
  • 3,262
  • 2
  • 16
  • 22
25
votes
1 answer

background-image: url("") in CSS h:outputStylesheet is not loading

Sorry if question is not properly asked. Image is showing fine in struts project but not in JSF2 project. All the css and buttons are rendering fine except image that has url in css. Folder structure resources -> css -> bootstrap.min.css resources…
Pirzada
  • 4,685
  • 18
  • 60
  • 113
24
votes
4 answers

How can I tell when a CSS background image has loaded? Is an event fired?

I have a sidebar widget that has an image background. Over this is a search input form. I don't want the input to show before the image has loaded. Is there a way to attach an load event handler to CSS background images like normal img…
Cole
  • 1,483
  • 1
  • 11
  • 20
24
votes
4 answers

Background Image Scaling While Maintaining Aspect Ratio

I would like to have images for my background that change automatically like a slide show. But I would like the images to fill the background no matter what size the browser window is...and if it is scaled down, the aspect ratio of the image does…
Sev
  • 15,401
  • 9
  • 56
  • 75
24
votes
4 answers

How to set the background image of a html 5 canvas to .png image

I would like to know how it is possible to set the background image of a canvas to a .png file. I do not want to add the image in the back of the canvas and make the canvas transparent. I want the user to be able to actually draw on that canvas…
Farzad Towhidi
  • 363
  • 2
  • 6
  • 13
24
votes
1 answer

Changing background image using jquery

I have this jquery code that changes the image of the background on click: $('a.note').click(function(){ $('#full').css('background-image','img/1.jpg'); }); However, it's not changing. Is there something I'm missing?
getaway
  • 8,792
  • 22
  • 64
  • 94
24
votes
7 answers

Repeating website background image - size vs speed

I was wondering if anyone has done any tests with background images. We normally create a background that repeats at least in one direction (x or y or both). Example Let's say we have a gradient background that repeats in X direction. Gradient…
Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
23
votes
6 answers

CSS background image - shrink to fit fixed size div

I have the following code at https://jsfiddle.net/ncrcfduz, and a background image at https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg. I need to make the background image rescale to fit in the div, preferred to show most of the "centered" content…
user1187968
  • 7,154
  • 16
  • 81
  • 152