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
19
votes
6 answers

How to make the background image to fit into the whole page without repeating using plain css?

I have an JPG image with size 1024 x 724. My page size is not fixed. My requirement is: If I resize the page then the background image should also resize and fit to the page. Also I don't want to keep the image related information in my Html…
Puru
  • 8,913
  • 26
  • 70
  • 91
18
votes
3 answers

Gatsby: Set background image with CSS

Looking at the Gatsby docs, they suggest that you can reference background images like you would anywhere else: .image { background-image: url(./image.png); } What they don't cover is where these images should live. I've tried placing the image…
Aaron Benjamin
  • 1,291
  • 3
  • 18
  • 27
18
votes
3 answers

CSS show div background image on top of other contained elements

Not sure if this is possible and how, but I tried playing around with the z-index of the elements in my code with no success. I have a div element that has a background image set in css. inside the div, i have other elements, like div and img. I…
IntricatePixels
  • 1,219
  • 6
  • 29
  • 55
18
votes
5 answers

How do I set a CSS url to an absolute location?

I'm working on an HTML5 mobile app and I initially have the background of a DIV item set through the CSS as follows: background-image: url('images/ClanSpider.png'); In my app, I have a method that changes the background DIV based on a selection…
Dillie-O
  • 29,277
  • 14
  • 101
  • 140
18
votes
11 answers

Why does a fixed background-image move when scrolling on IE?

I'm trying to make background-image fixed. As you see in my blog, the background-image is moving when scrolling on IE 11. How can I fix this? This is my CSS: background-image: url("./images/cover.jpg"); background-repeat:…
the1900
  • 495
  • 1
  • 5
  • 16
18
votes
2 answers

How to position a background image in reveal.js?

I want to have a background image on the right hand side of one slide in a reveal.js presentation. I added the image to the slide like this:
// content
How can I add css styles to make it…
Jens Schauder
  • 77,657
  • 34
  • 181
  • 348
18
votes
2 answers

CSS fading top and bottom "borders"

Take a look at this : http://jsfiddle.net/wjhnX/ I achieved it with this CSS : background-image: radial-gradient(#CCC, #FFF), radial-gradient(#CCC, #FFF); background-size: 2px 100%; background-position: 0 0, 100% 0; background-repeat: …
Jeremy Belolo
  • 4,319
  • 6
  • 44
  • 88
18
votes
2 answers

Overlay a background-image with an rgba color, with a CSS3 transition

Earlier today I asked Overlay a background-image with an rgba background-color. My goal is to have a div with a background-image, and when someone hovers the div, the background-image gets overlayed with an rgba color. In the answer, a solution with…
user1544337
18
votes
9 answers

Background images not working in Outlook 2007 and later

I made an HTML Email Template that is working fine in most email readers, but the background images are not showing in Outlook 2007, 2010, and 2013. How can I solve the problem? Here's the HTML for the email:
Exploring
  • 573
  • 2
  • 6
  • 19
17
votes
2 answers

(Really) Long Background Image Does Not Render on iPad Safari

For some unknown reasons, iPad Safari doesn't display a really long background image. In my example, the background image is 1,000 x 10,000 pixels. The same example works on any desktop browser e.g. Safari, Firefox, etc. I am aware of the…
moey
  • 10,587
  • 25
  • 68
  • 112
17
votes
2 answers

CSS: Stretching image to 100% width

Hi all I am trying to strech the background of my side to fit the width. I only found big workarounds in the internet. Is there not one single command for this? body { background-image: url(money.jpg); } Thanks for the answers. Doonot
nimrod
  • 5,595
  • 29
  • 85
  • 149
17
votes
3 answers

Overlay data onto background image

I recently figured out how easy it was to use a background image and map data on top of it using Tableau Public. Here is the process from their website. As you can see, it is fairly straightforward, and you simply tell the software what image you…
Btibert3
  • 38,798
  • 44
  • 129
  • 168
17
votes
8 answers

Is it possible to create an image on a webpage that cannot be copied or saved by the end-user

On some web-pages, background images cannot be copied or saved. The browser I use does not recognize it as an image. The question I have is: I want to know how it is possible to create an image on a webpage that cannot be copied by the user. For…
GradDev
  • 391
  • 3
  • 15
17
votes
2 answers

Full size background-image to SVG path

I've been using Raphael JS (…it's brilliant). I was just wanting to understand how I can add a background-image and background-size (cover) to my SVG path I created with Raphael. Is this at all possible? What I have tried: I've tried adding a…
WPZA
  • 841
  • 1
  • 10
  • 27
17
votes
3 answers

iOS 8 NavigationBar BackgroundImage

With iOS 8 the concept of just iPhone and iPad sizes along with portrait and landscape have changed and therefor setting the navigation bars background image isn't working the same. Currently i'm using the following code: UIImage…
Chris
  • 1,750
  • 2
  • 14
  • 23
1 2 3
…
99 100