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

Add an image inside a circle made with css

I'm trying to add an image inside a circle built with css. I think I could upload the image correctly but there's a problem with the visualization of the image as you can see below. I've also tried to export the image I want to use as the same size…
Emanuele Pesa
  • 73
  • 6
1
vote
1 answer

(Shopify / Liquid ) Background Image only displays right image when assigned inline

I created product cards to display on a collection page in shopify where variants are displayed as different poducts. Everything is working well ( its displayed the correct price of each variant / name and everything ) but the variant image that I…
Maxswift
  • 73
  • 11
1
vote
2 answers

CSS / SCSS background image as marker for li via :before

this is my first question so I hope its specific enough: I want to enter a svg check mark sign (https://fonts.google.com/icons?icon.query=check&icon.style=Sharp) in front of each li item, instead of the marker (I already removed in ul). When I enter…
LukLearn
  • 15
  • 5
1
vote
1 answer

CSS background-attachment fixed positioning with var()

I'm trying to create some kind of a parallax effect, but inside a div positioned in a layout. As far as I understood, using background-attachment:fixed; makes the background position being calculated according to the viewport, so I tried to compute…
tvarnier
  • 115
  • 1
  • 7
1
vote
1 answer

masking a text with a one of image and one of div background color

My problem here is that I want to make a half in the text wherein the the other side of text is just a div with a background color and other half is an image so that I can mask it in a text. Here is the sample code. .title { font-size:…
Myth Vince
  • 143
  • 9
1
vote
1 answer

Background image is not working correctly

I am trying to replicate this site which is mostly working fine. But when I try to use ::before to apply a background image, no matter what I try, it doesn't work as I want. Here is the code : /* Section */ section { grid-area: section; …
Heghar Hex
  • 13
  • 3
1
vote
1 answer

How to using CSS for "Left Slanted Stripe" on Background repeat-x setting for both ends

I am trying to making Left Slanted Stripe with CSS. I don't know how to make both ends not to show clearly like below image that I attached. ideas for Left Slanted Stripe Can I repeat as Counting Numbers of Image with CSS? Can I get some…
arborsday
  • 11
  • 2
1
vote
1 answer

Custom shape of bottom navigation view (Android)?

How to make the bottom navigation view to a specific shape? I'd like to have a bottom navigation view of this shape: I have tried setting it as background of my bottom nav view as:
Sparsh Dutta
  • 2,450
  • 4
  • 27
  • 54
1
vote
1 answer

How to scale polygons of svg that's inside div

I have a React application in which I render multiple polygons on SVG element that is the same size as his parent div which has a background-image property. On desktop it looks like this: So those green buildings are just polygons mounted on svg.…
mne_web_dev
  • 261
  • 4
  • 12
1
vote
1 answer

Is there a way to eliminate background noise in a color screened image?

im using the following code to color screen a photo. We are trying to locate the orange circle within the image. Is there a way to eliminate some of the background noise shown in the second photo? Tweaking the color range some may help but its never…
David Fieser
  • 33
  • 3
1
vote
1 answer

set WriteableBitmap image to background in windows phone 7

using the WriteableBitMapExWPhone I have successful create the image with mask effect, however I wonder how can I set that image to be my page background? My code below: ImageBrush imageBrush = new ImageBrush(); ImageBrush…
Nghia Nguyen
  • 2,585
  • 4
  • 25
  • 38
1
vote
1 answer

Mobile browser add background to m svg

I am using this svg as background of input type="range" thump via background-image
sonphung.xf
  • 107
  • 8
1
vote
1 answer

let the background-image opaque at the top red bar and transparent at the rest part down below

I want to let the background-image have an opacity: 1 (opaque) at the top red bar and opacity: 0.9 (transparent) at the rest part down below. for now it is: body { font-family: sans-serif; background-image: url("./LoveLive-SuperStar.png"); …
user14554732
1
vote
2 answers

Background image doesn't appear while writing in css

StackOverflow. I got problem, when I'm trying to put background image it doesn't appear Here's the code body { background-image: url(https://i.pinimg.com/originals/90/db/f4/90dbf402730c059e0f106ce80d1d779a.jpg); }
chiponchez
  • 13
  • 2
1
vote
1 answer

SVG clip-path objectBoundingBox cut the image

i will use clip-path with svg. but the "image"/div will cut on the on the edge. i don't know what iam doing wrong. .clipped{ width:400px; height:400px; background-repeat:no-repeat; background-size:cover; } .clipped2 { clip-path:…
Donja
  • 23
  • 5
1 2 3
…
99 100