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

Plotly.express Area multiple plots data error

This is my code: import pandas as pd import plotly.express as px df={'x':[1,2,3,4,5],'y1':[1,2,3,4,5],'y2':[2,3,4,5,6],'y3':[3,4,5,6,7]} df=pd.DataFrame(df) fig = px.area(df, x="x", y=['y1','y2','y3']) fig.show() As you can see my Y data are…
BijanSeif
  • 39
  • 5
1
vote
1 answer

Simple Background Image Slideshow (No Transition Effect)

I would like to make a full page CSS background change to a different image every few seconds. I have tried searching for a simple solution, but all the examples I find have fade in/fade out transitions.
user17758164
1
vote
1 answer

Flexbox height and background image height

I am a beginner in html and CSS, and I will try to make a map with clickable points, but I do not get it right. I have received a tip of using flexboxes and creating a container with the map as a background image, and creating separate containers…
Amy K
  • 23
  • 2
1
vote
3 answers

How to make background image resize itself, but only till its original size reached?

I'm trying to create a website, where the background image is going to be centered, and and it will resize itself based on the web browser window, but only till reaching its original size. After that it will stop becoming larger and just stay…
Marek Maďar
  • 23
  • 4
1
vote
2 answers

Is it possible to measure the resulting background image when using background-size: cover with Javascript?

I want to know if it's possible to determine the (new) dimensions of a background image after it has been resized with css3's 'background-size: cover' using Javascript. (Not working) Example: http://jsfiddle.net/daco/GygLJ/3/ Cheers, Daco
Daco
  • 61
  • 2
  • 6
1
vote
1 answer

How set blurred background image for mat-card

I have mat-card with dynamic background image and i need blur this image My card Card Content my…
NiNjA_CaT
  • 68
  • 5
1
vote
1 answer

Using the CSS Filter Property for IE 7 & 8 for a gradient along with a background image decreased opacity of the image?

I've added a gradient along with a background image to an element in IE 7 & 8, however the filter property seems to be changing the opacity of the background image so it's not as bright as it should be (instead of being a 1.0 opacity it's more like…
Zoolander
  • 2,293
  • 5
  • 27
  • 37
1
vote
3 answers

How to make only background color black and white in mix-blend-mode?

I am developing an app with vue. However, I do not want to set black and white for the background-image on one page and not to set black and white for the elements above it, but it is set automatically and the whole is changed to black and…
sunpl13
  • 147
  • 4
  • 13
1
vote
5 answers

Why would you be restricted from using both background-image and background-color?

So I have looked in many different SO questions and google results but I have not found the exact information I have been looking for. I have a background-image that I wanted to do a transparent color overlay for. The common answer is to just use…
Drew
  • 21
  • 4
1
vote
3 answers

how can i use full background image after using margin in css

i am facing a problem with my CSS. how can i use full background image after using margin in CSS? i have already used 2.5% background whole body but when i am going to use the background in my CSS code i am seeing that background also captured by…
Jabed
  • 15
  • 5
1
vote
2 answers

Combining multiple linear gradients in one display

I'm looking to combine three linear gradients into one image background, like so: three gradients, but have not found a good way of doing so. When I try using the linear-gradient css property with multiple elements, I am unable to provide anything…
Maanav Dalal
  • 17
  • 5
1
vote
1 answer

Center of image always in the center of div

I was trying to create a carousel replicating the one as in https://www.fcbarcelona.com/en/ Barca's website. It was pretty easy, though I can't wrap my head around, on how to make the background-image be centered inside my div, despite my divs size,…
Giannis Sioutis
  • 19
  • 1
1
vote
3 answers

Hover over one div, change background over link in div using HTML/CSS

I want to change the background image of the container such that when I hover on a link in the div, the background image changes. Reading in stackoverflow and other sources, this should work, but I have tested in both Chrome and Edge. Neither is…
Kurt_eh
  • 49
  • 2
  • 10
1
vote
1 answer

Background doesn't work, it goes up and get cut in half

I'm creating a website login windown, and the background is an image, but the image always get cut in half and go up. this is the code I'm using: .loginbody { background: url(img/LoginBackground3.jfif); background-repeat: no-repeat; …
Arthur Beluci
  • 15
  • 3
1
vote
1 answer

How do I set a linear gradient over a background image in React?

I have been trying for over an hour and this is the only thing I can come up with. I built the app with CRA so I have to keep the image in the img folder. I am new to React some I am at a lost here for what to do/ import NavBar from…
RDX10290
  • 451
  • 1
  • 4
  • 13
1 2 3
…
99 100