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
1
vote
1 answer

How to make a background image scrollable in Flutter?

I'm doing like a treasure map on my app. I had success to make the points(boards) on the map scrollable, but not the background. Because I'm also creating the art for the map itself, so before that I have to make everything works. In short I will…
Sir_Catapimba
  • 93
  • 1
  • 11
1
vote
2 answers

How to decrease or increase the width of image (icon) from css for a text box

I am using image as a icon not font awesome. I am trying to reduce the size of image using css. Here is my code: .sign_up_name { background: url(../images/name.png) no-repeat scroll 11px 13px #f2f2f2 !important; }
Mr.M
  • 1,472
  • 3
  • 29
  • 76
1
vote
1 answer

Issue with breakpoint and background-image

So I have a div containing a logo, a version for mobile and desktop that switches at each breakpoint. basically I have display: none; set in css appropriately so they display at the proper breakpoint. Everything worked great until I added a…
gears244
  • 63
  • 1
  • 6
1
vote
1 answer

how to add background gif image as splash screen in launch_background.xml in flutter

how to add background .gif_image as splash screen in launch_background.xml in a flutter. The below image shows, I tried to add .gif_image in the 'drawable' folder and add to the background image but still getting errors. Is it the right way that I…
jasmine
  • 149
  • 13
1
vote
1 answer

How to create a split background color layout in pure CSS

I'm trying to create a footer for a site that has this split color design, where's there's two triangles almost overlapping one another. Any ideas would be greatly appreciated! Thanks! I attempted something like this: background:…
Marc
  • 107
  • 6
1
vote
1 answer

transparent background image without turning the content transparent

I have a background for the entire body of my page. Inside the body, I have a form that has another background image specifically for it. I want the background of that form to be slightly transparent so I could see the background image. What…
jgrewal
  • 342
  • 1
  • 10
1
vote
1 answer

How to reduce gradient pattern to less code

I'm trying to reduce the size of this code the gradient pattern is using, is there a way to do that? That is all I am trying to do. Reduce the size of the code. How can this be done? Can the code be written in a way that uses less code? I was not…
user16466354
1
vote
1 answer

CSS Background Text Clipping affecting emoji

I have some text rendering a gradient color via background clip: text, however the emojis are also affected and rendering the gradient, which is not my intention. How do I make the emojis display in its original form? p { background:…
Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141
1
vote
2 answers

Removing the middle of the background, keeping only the border

Can this be done? How can I make the middle of the background completely transparent? This would make the middle part transparent, and would have nothing applied to it. https://jsfiddle.net/racsob9v/ It looks like this now. I'm trying to do…
user16466354
1
vote
1 answer

Blend two backgrounds with two imgs

how can I blend two backgrounds of parent and child element only with css:
and this doesn't work... I would like…
Matredok
  • 90
  • 1
  • 13
1
vote
2 answers

Background image with pseudo-element in CSS

I've been given the following code: .container { color: white; height: 80vh; margin: 10vh 0 0 25vw; position: relative; width: 50vw; } .container::after { content: ""; background:…
kinets
  • 65
  • 1
  • 8
1
vote
1 answer

making a background image dynamic and change every few seconds

What my code is doing: creates an img tag that changes the image every 3 seconds. background image is static currently, we have a dynamic img tag that's changing every 3 seconds on top of a static background. reason being it was a test to see I…
jgrewal
  • 342
  • 1
  • 10
1
vote
2 answers

CSS body background-image not showing in IE-6

I have some problem with the background-image property in IE-6. In all other browsers, background-image is showing except IE-6. This is the url of my site http://indivar.info/godsak/node/2. This is what I have written in the css. body…
samir chauhan
  • 1,543
  • 1
  • 17
  • 42
1
vote
1 answer

How to Creating Transparent Bitmap Image?It gives black background when i set property Graphics.clear(color.Transparent ).)

I am using a tag in a aspx page named displayImage.aspx and assigning its src attribute value which is other one aspx page named getImageFromText.aspx ** src="getImageFromText.aspx" .** I wrote code for creating bitmap in…
Shailesh Sahu
  • 5,801
  • 5
  • 18
  • 9
1
vote
0 answers

How to display sprite sheet element as background-image or content:url() in react?

Expectation: In React app, I'm trying to display an svg icon (from an svg sprite sheet) in h1::before either using background-image or content:url(). It ends up showing nothing. // in App.js import "./styles.css"; export default function App() { …
LittleTeemo
  • 184
  • 2
  • 12
1 2 3
…
99
100