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 background image editable in Experience Editor in Sitecore using C#

I have a component and it has background image. I am able to render the image but I need the image to be editable in Experience editor but now the image is not editable.
…
coder
  • 11
  • 3
1
vote
1 answer

How to stop background video from resizing on scroll on mobile?

The resizing of the background happens due to the popping in/out of the browser bar on the phone. How can I prevent this issue? CSS html { overflow: hidden; height: 100%; } body { font-family: "Roboto", sans-serif; height: 100vh; width:…
Guchierrez
  • 57
  • 5
1
vote
0 answers

How to add background image on the heatmap based on eye-tracking data drawn by R studio to ensure they are layover together?

I am drawing a heatmap based on some eye-tracking data(X, Y, duration) in R. The function I used to draw the heatmap is MASS::kde2d (learn from internet). Here is my scrip: ######df1 has three colums: Xposition of every fixation, Yposition of every…
Ziming Jin
  • 11
  • 1
1
vote
2 answers

TailwindCSS - background image not loading on build

I'm doing a Frontend Mentor challenge and I've ran into a problem when publishing my project to Vercel. The background image can't load. Everything works on my local machine, but when deployed, the only image that doesn't load is that background…
badmood111
  • 61
  • 5
1
vote
1 answer

css background image not seamless

I am using html5 and am trying to create a rough edged seamless border(top, sides + bottom). I am aware ie8 does not support the CSS3 border image. IE8 is as far back as am willing to cater for. So am using 3 div's to have the background image…
Renai
  • 195
  • 2
  • 3
  • 13
1
vote
0 answers

Is it possible to add responsive background image using cloudinary in React?

I have just discovered cloudinary and I am making a website where I am trying to make several sections of the page with different background images to be responsive by size as well by format for older browsers. I have set up React SDK and with…
Tomas
  • 21
  • 1
  • 5
1
vote
1 answer

Is there any way to make background image resize itself to the clip-path set for the element in css?

I want my background-image to follow the shape of its element. Like if I set my element's clip-path to: clip-path: polygon(0 0, 50% 10%, 50% 90%, 0% 100%); I want the background-image to change its size and aspect-ratio to match the element's…
Merwin
  • 9
  • 3
1
vote
2 answers

CSS Property included correctly but still not working

I have added css property correctly in style.css and all other things are also right but still its not getting on screen css: .header { width: 100%; height: 100vh; background-image: url(background.png); background-size: cover; …
photos mayuresh
  • 11
  • 1
1
vote
0 answers

Customized Tailwind css Background Image not displaying upon deployment

I have customized Background Image in tailwind.config file and it displays on the local host as expected, however after I deployed the site on Github pages, the background image doesn't display. Here is the code in the tailwind.config file. …
santino majur
  • 11
  • 4
1
vote
2 answers

Using CSS to style LI element with background image

I'm attempting to use tabs generated by CSS to show an active state of an arrow under the tab. I was trying to position the image for the hover event with the background position properties, but it would bring the image outside of the given…
MLS1984
  • 307
  • 2
  • 6
  • 21
1
vote
1 answer

How to position a textInput widget on certain position in a shiny app with a background picture

I have this example app: library(shiny) ui <- fluidPage( textInput("a", "A", width = 20), textInput("b", "B", width = 20), tags$img( src = "https://posit.co/wp-content/uploads/2022/10/09_HOMEPAGE.svg", style = 'position: absolute' …
TarJae
  • 72,363
  • 6
  • 19
  • 66
1
vote
0 answers

resize different size images to certain aspect ratio and remain responsive

I'm relatively new to all this. I want so be able to host some images on my raspberry pi on my local webserver instead of having to look through folders, but I am having trouble with pretty much everything regarding making the site. My first goal is…
UserOfInternet
  • 11
  • 1
1
vote
1 answer

Firefox background image transition with multiple images using javascript

I have a banner area that I am changing its background every 10 seconds. The issue is, on firefox, when I change the background-image using javascript instead of animation, it flickers for a glimpse of time. The transition works fine on other…
Pelin
  • 467
  • 4
  • 17
1
vote
2 answers

Add Two background images in a same div with same margin

I inserted two background images to a div and gave them the top and bottom positions. However, the issue is that I want the images to have an equal top and bottom margin. I'm not sure how to accomplish it. I want the background images like in the…
sohaib
  • 574
  • 5
  • 16
1
vote
1 answer

How to pad the text in a span, but not pad the background image

I have a situation where I have a SPAN with a background image of a button, with text. The text is however on top of the button, while I want it to be vertically centered. I tried to adjust it with padding, but then the background image shifts…
Daniel van Dommele
  • 550
  • 2
  • 14
1 2 3
…
99 100