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
10
votes
2 answers

how to change background image of a form in c#?

Can I use Menu strip or context menu to allow the user so that he can change the background image of the window instead of background colour in c# ?
user3004295
  • 93
  • 1
  • 2
  • 5
10
votes
2 answers

Bootstrap carousel as website background

I'm using twitter bootstrap carcass for my web project development. Currently I have full screen background image which I set for the body tag like: body { background: url('Content/images/planet.gif') no-repeat center center fixed; …
mbigun
  • 1,304
  • 4
  • 19
  • 46
10
votes
3 answers

How to add two background images - left and right from center column

I have this css: #wrapper1 { min-width:1020px; min-height:100%; } #wrapper2 { height:100%; background: url('img1.jpg') -100px 300px no-repeat, url('img2.jpg') 1165px 300px no-repeat; } #wrapper3 { width:1020px; margin:0 auto; } and this html:
Vasiliy Terkin
  • 103
  • 1
  • 2
  • 4
10
votes
3 answers

buttons background images stretched (wrap_content or dp usage)

i'm setting background images to my custom buttons. I made a screenshot for my app and mentioned that when i'm using "wrap_content" for the width and height of the button, the button is stretched. When i'm fixing a size in dp, it will appear nice (…
Anthony
  • 189
  • 1
  • 3
  • 16
10
votes
3 answers

CSS - Transparency Gradient on an Image

I would like my background image to go from 100% opacity to 0% opacity. I could choose to use another image asset where I use an image editor to make the image fade opacity, however I want to use as little assets as possible. Can this be done with…
michaellindahl
  • 2,012
  • 5
  • 36
  • 64
10
votes
4 answers

scale background image

I would like to scale up and down a background image in my page. I've tried multiple things but nothing quite seems to work the way I want. :( The url of my page is http://quaaoutlodge.com/drupal-7.14/ and for each link, there's a different…
stdcerr
  • 13,725
  • 25
  • 71
  • 128
9
votes
4 answers

Why would the background-image property cause a warning in Chrome?

I'm using jQuery's .css() method to set the background image of a div. The HTML in its final state is thus:
Isaac Lubow
  • 3,557
  • 5
  • 37
  • 53
9
votes
6 answers

Background image doesn't repeat when browser window is smaller than content?

I have a header-container with a background image, like so: #header-container { background:url(../img/bg.jpg) repeat-x 0 0px; margin:0px auto; width:100%; text-align:center; } When my browser is in fullscreen (Firefox, Opera, IE), I get the…
bernte
  • 1,184
  • 2
  • 19
  • 34
9
votes
7 answers

Background center with chrome (bug)

I have a background image centered that Chrome displays offset by one pixel. CSS #container { background: url("images/header.jpg") no-repeat scroll 50% transparent; width: 100% } #header { width: 986px; margin: 100px auto 0…
Naoise Golden
  • 8,793
  • 4
  • 49
  • 65
9
votes
4 answers

how to set the different background image format (png and webp) of the same image in section tag

I have started using webp images in my site with tag. all set except this
I don't know, how to set the different background image format (png and webp) of the same image.…
manoj v
  • 91
  • 1
  • 2
9
votes
2 answers

Multi Resolution background images in Flutter assets

In Android we have variety of dpi drawable folders so we add background images in that based on resolution. Same like in iOS we add in 1x, 2x and 3x based on screen sizes. But how we will add multi resolution images in Flutter assets? Ex:…
rjkolli7
  • 153
  • 3
  • 9
9
votes
6 answers

angular 6 scss background image not being read

In my angular 6 app I have the following in my scss file: .pictureplaceholder{ background-image: url("assets/images/profilepictureplaceholder/PersonPlaceholder.png"); } that is the correct path to the resource. yet I get this error. ERROR in…
weridpotato
  • 261
  • 1
  • 3
  • 11
9
votes
6 answers

React-native: How to set image in background of Layout(View)

Right now i am setting background image with below code where creating one extra image view to set image over view and its working fine.
Mohd Shahzad
  • 249
  • 2
  • 3
  • 9
9
votes
5 answers

CSS background image rendering differently on iPhone

We have a page design that works great in every PC browser that I have tried, but goes strange when viewed with an iPhone or iPod Touch. The problem is something to do with a centred background image thats very…
codeulike
  • 22,514
  • 29
  • 120
  • 167
9
votes
2 answers

Get final size of background image

is there an easy way to get the final height and width of a background image with Javascript or jQuery even if a background-size property was applied? I mean, I know I can get the background image url and load it to an Image object and then get the…
Victor Ferreira
  • 6,151
  • 13
  • 64
  • 120
1 2 3
…
99 100