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
155
votes
4 answers

How to add a color overlay to a background image?

I have seen this question a lot both on SO and the Web. But none of them has been what I am looking for. How do I add a color-overlay to a background image using CSS only? Example HTML:
Example CSS: .testclass { …
Alex
  • 1,988
  • 3
  • 14
  • 20
149
votes
13 answers

CSS3 background image transition

I'm trying to make a "fade-in fade-out" effect using the CSS transition. But I can't get this to work with the background image... The CSS: .title a { display: block; width: 340px; height: 338px; color: black; background:…
Nick Zani
  • 1,491
  • 2
  • 10
  • 3
147
votes
10 answers

Is there a way to set background-image as a base64 encoded image?

I want to change background dynamically in JS and my set of images is in base64 encoded. I try: document.getElementById("bg_image").style.backgroundImage = "url('http://amigo.com/300107-2853.jpg')"; with perfect result, yet I fail to do the…
Igor Savinkin
  • 5,669
  • 8
  • 37
  • 69
138
votes
5 answers

IE 8: background-size fix

I've tried to add background size to IE but it's not working at all: HTML

Notícias

CSS: div#content h2#news { background: url('../images/news-background.jpg') no-repeat; …
Thomas
  • 1,381
  • 2
  • 9
  • 4
138
votes
10 answers

How to stretch the background image to fill a div

I want to set a background image to different divs, but my problems are: The size of image is fixed(60px). Varying div's size How can I stretch the background-image to fill the whole background of the div? #div2{ …
Muhammad Usman
  • 10,426
  • 22
  • 72
  • 107
132
votes
10 answers

Is there a srcset equivalent for css background image

img with srcset attribute looks like a great way of doing responsive images. Is there an equivalent syntax that works in css background-image property? HTML yah CSS .mycontainer…
Martin Algesten
  • 13,052
  • 4
  • 54
  • 77
119
votes
5 answers

Android: textColor of disabled button in selector not showing?

I am trying to make a button with a selector my button can have the following states: Enabled/Disabled Pressed/Not Pressed According to the states mentioned above. I need to manipulate the button's: Text color background image The button starts…
Nouran H
  • 1,992
  • 5
  • 18
  • 24
112
votes
12 answers

Google Chrome Extensions - Can't load local images with CSS

I have a simple Chrome extension that uses the content script feature to modify a website. More specifically, the background-image of said website. For some reason I can't seem to be able to use local images, even though they are packed in the…
Bjarki Jonasson
  • 1,165
  • 3
  • 9
  • 5
106
votes
8 answers

Can I set an opacity only to the background image of a div?

Let's say I have
Hi there
I want to put a background-image and give it an opacity of 0.5 – but I want that the text I have written will have full opacity (1). If I would write the CSS like this .myDiv { opacity:0.5…
Alon
  • 7,618
  • 18
  • 61
  • 99
104
votes
10 answers

Using HTML data-attribute to set CSS background-image url

I plan on building a custom photo gallery for a friend and I know exactly how I am going to be producing the HTML, however I am running into a small issue with the CSS.(I would prefer to not have the page styling rely on jQuery if possible) My…
stephenkelzer
  • 1,234
  • 2
  • 12
  • 20
100
votes
7 answers

Background images: how to fill whole div if image is small and vice versa

I have three problems: When I tried to use a background image in a smaller size div, the div shows only part of image. How can I show the full or a specific part of image? I have a smaller image and I want to use in a bigger div. But don't want to…
Aakash Sahai
  • 3,935
  • 7
  • 27
  • 41
99
votes
13 answers

How do I stretch a background image to cover the entire HTML element?

I'm trying to get a background image of a HTML element (body, div, etc.) to stretch its entire width and height. Not having much luck. Is it even possible or do I have to do it some other way besides it being a background image? My current css…
Fung
  • 7,530
  • 7
  • 53
  • 68
99
votes
9 answers

100% width background image with an 'auto' height

I'm currently working on a mobile landing page for a company. It's a really basic layout but below the header there's an image of a product which will always be 100% width (the design shows it always going from edge to edge). Depending on the width…
Darryl Young
  • 2,145
  • 2
  • 20
  • 19
96
votes
9 answers

Can I get div's background-image url?

I have a button of which when I click it I want to alert the background-image URL of #div1. Is it possible?
jQuerybeast
  • 14,130
  • 38
  • 118
  • 196
87
votes
4 answers

CSS: stretching background image to 100% width and height of screen?

I have an image called myImage.jpg. This is my CSS: body { background-image:url("../images/myImage.jpg"); background-repeat: no-repeat; background-size: 100% 100%; } For some reason, when I do this, the width of myImage stretches across…
SilentDev
  • 20,997
  • 28
  • 111
  • 214
1
2
3
…
99 100