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
85
votes
7 answers

Positioning background image, adding padding

I'd like to add a background to a div, position right center, but!, have some padding to the image. The div has padding for the text, so I want to indent the background a little. probably makes most sense w/…
Ian Davis
  • 19,091
  • 30
  • 85
  • 133
79
votes
4 answers

How to include the background-cover value in the shorthand background property?

I am trying to set a background-image to stretch to the full extent of a
's width and height. The
will be of variable size, so I am using background-size: cover; background: url("../images/bkgnd-sidebar.png") no-repeat left top cover; I…
techtheatre
  • 5,678
  • 7
  • 31
  • 51
76
votes
4 answers

CSS set background-image by data-image attr

I have sort of elements with this pattern:
I want to set this elements background-image to data-image. I test this CSS code: div[data-image] { border: 2px solid black; background-image:…
Hossain Khademian
  • 1,616
  • 3
  • 19
  • 29
71
votes
6 answers

:before and background-image... should it work?

I've got a div and apply :before and :after an image as content. That works perfectly. Now I would need to apply a background image so it does repeat as the div resizes, but it does not seem to work. Is background image on :before and :after…
Michi
  • 2,480
  • 3
  • 28
  • 38
69
votes
8 answers

background-size: cover not working on iOS

This is my code: background-color:#fff; background-attachment:fixed; background-repeat:no-repeat; background-size:cover; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center center;…
Hoàn Nguyễn
  • 691
  • 1
  • 6
  • 5
65
votes
2 answers

Disable antialising when scaling images

Possible Duplicate: How to stretch images with no antialiasing Is it in any way possible to disable antialiasing when scaling up an image ? Right now, i get something that looks like this : Using the following css code : #bib { width: 104px; …
Nils Munch
  • 8,805
  • 11
  • 51
  • 103
63
votes
14 answers

Rails: How to set a background image in rails from css?

I am using rails 3.2 and i have to set a background for one of the page and i have tried many ways and nothing went right, so looking for some good help. I have tried background: url(<%= asset_path 'background.jpg' %>) background:…
logesh
  • 2,572
  • 4
  • 33
  • 60
59
votes
9 answers

Symfony2 - Assetic - load images in CSS

I have a CoreBundle that contains main css files and images. Now I have a problem when I load an image from css; the image isn't shown. background-image:url(../images/file.png) (with a full path it works) I installed the assets using the command:…
LBridge
  • 2,135
  • 5
  • 21
  • 32
59
votes
5 answers

Why an inline "background-image" style doesn't work in Chrome 10 and Internet Explorer 8?

Why the following example shows the image in Firefox 4, but not in Chrome 10 and Internet Explorer 8? HTML:
CSS: div { width: 60px; …
Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746
57
votes
8 answers

Adding background image to div using CSS

I have been trying to add background image to a div class using CSS, but I didn't have any success. HTML code:
56
votes
5 answers

Overlay a background-image with an rgba background-color

I have a div with a background-image. I want to overlay the background-image with an rgba color (rgba(0,0,0,0.1)) when the user hovers the div. I was wondering if there's a one-div solution (i.e. not with multiple divs, one for the image and one for…
user1544337
55
votes
5 answers

Can I use an image from my local file system as background in HTML?

I've got an HTML document hosted on a remote web server. I'm trying to have one of the elements on the web page use an image file from my local file system as its background image. No luck with Chrome, Safari or Firefox (haven't tried IE). Here's an…
Johan Fredrik Varen
  • 3,796
  • 7
  • 32
  • 42
55
votes
9 answers

Change background image opacity

I have a div element with text blocks and a parent div in which I have set a background image. Now I want to reduce the opacity of the background image. How can I do that? EDIT: I am looking to change the way my blog post looks at blogger.com by…
Victor Mukherjee
  • 10,487
  • 16
  • 54
  • 97
53
votes
5 answers

How to replace white background color with transparent of an image in ImageMagick?

I have an image in .jpg format with white background color. I want to remove the white background color to transparent in Imagemagick. I tried many ways but still the white background can not be removed. Can some one help me to solve this.
NewUser
  • 12,713
  • 39
  • 142
  • 236
51
votes
7 answers

How to use responsive background image in css3 in bootstrap

I dont want to use html tag. This is my css. I am using bootstrap 3.0. background:url('images/ip-box.png')no-repeat; background-size:100%; height: 140px; display:block; padding:0 !important; margin:0; On 100% zoom this is OK. but when I zoom in at…
Faizan
  • 1,132
  • 2
  • 12
  • 23
1 2
3
…
99 100