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

(some) background images won't show up in IE7 or IE8

CSS: #content { width:630px; } .all_friends { background:url(../img/friends.png) no-repeat; margin-left:15px; height:123px; width:615px; padding-bottom:20px; } .all_awards…
Chris22
  • 1,973
  • 8
  • 37
  • 55
1
vote
1 answer

How to create a multi color "free flow" gradient with CSS

I want to create a multi colored "free flow" CSS gradient background. It should look something like this: It seems I need to use a background blend mode. For example screen: background-blend-mode: screen; The gradient has five colors: A:…
Morten Vestergaard
  • 27
  • 1
  • 5
1
vote
1 answer

How to get Height and Width of background-image of an element using JavaScript?

I'm trying to test an image with Selenium. But my problem is that image is background-image and it doesn't have img tag, it have this html code (it is banner from https://openweather.co.uk/products page):
zaelcovsky
  • 23
  • 4
1
vote
2 answers

css background image is not loading in list

I'm trying to load a background image with a "before" tag into a list to create a checkmark image at the back of the list, but the images aren't showing up. What is the problem? Here is the code: .list1 li:before { content: ''; background:…
megagrape
  • 11
  • 2
1
vote
0 answers

How to use CSS images with Vite?

Vite doesn't seem able to resolve paths for CSS url(). I have: .element { background-image: url("../assets/images/my-image.png"); } Instead of seeing the resolved path in Chrome, I just see the same unresolved path I specified in my CSS…
drake035
  • 3,955
  • 41
  • 119
  • 229
1
vote
0 answers

Background image with an attachment of fixed inside a div with a radius getting warped during scroll

The background image is attached to a div with a fixed attachment and a top radius of 50px. However, during scroll, it gets warped. When I removed the fixed attachment, it worked fine. But with the fixed attachment, it warps backward, creating a 3D…
Lakindu Rathmanagolla
  • 11
  • 2
1
vote
1 answer

Nextjs background image hosting issue on netlify

I have been trying to deploy a nextjs website on netlify. Everything is working fine on my local host. But when hosted on Netlify the background image url is changing and the background image is not visible. original -> background-image:…
Shiva Gowtham kale
  • 11
  • 2
1
vote
5 answers

How to add background image in laravel 9

I am trying to add a background image for my website in Laravel 9.51. I've used this in my css file: body { background-image: url("background.jpg"); } But it doesn't work. Also tried: body { background-image:…
Myoko
  • 21
  • 3
1
vote
4 answers

How to place my

texts

after the end of the background image, keeping leading

as is?

The url is https://sputnick.fr/ The HTML is: body { background-color: #15141A; background-image: url("https://sputnick.fr/header.jpg"); color: white; font-family: "Arial"; font-size: 16px; }

foobar

lorem ipsum…

Gilles Quénot
  • 173,512
  • 41
  • 224
  • 223

1
vote
2 answers

When do background images from a style sheet get downloaded?

When a user downloads a style sheet, do all background images specified in that style sheet get downloaded as well? Or, are background images only downloaded as needed based on the CSS rules that apply to the current page?
ScottG
  • 19
  • 6
1
vote
0 answers

Background image is not displaying using either the style attribute or a Tailwind utility class

I am using Tailwind CSS to build a landing page that I have divided into sections. I want to use a background image on the particular
so that it only shows up in that section. I also plan to put a button and text box on top of it. My attempt…
gerard
  • 221
  • 1
  • 2
  • 10
1
vote
0 answers

Clip a single fixed position global gradient anywhere in dom

I'm trying to set up an effect like Telegram's chat scrolling, where there is a global gradient positioned relative to the screen (fixed), and elements vary in color according to their vertical position on the screen. It should look something like…
cadlac
  • 2,802
  • 3
  • 18
  • 34
1
vote
1 answer

How to give path/url for background image in tailwind?

I'm using Tailwind in my React Project. I want to add a background image in a div but it shows the following error: Module not found: Error: Can't resolve '../../icons/blog-hero-1.png' in…
Fuaad
  • 197
  • 15
1
vote
1 answer

I need to position background image to the right of container and a small box of text inside of it to be floating to the left (& overlapping the img)

Here's what I want to achieve both for desktop and mobile: And here's how far I've gotten with it .container { background-image:…
John Holliday
  • 311
  • 4
  • 16
1 2 3
…
99 100