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 show viewport's overscroll background-image

I have a background image repeated on the Y axis in order to cover the whole page. html { background-image: url('https://www.bertamini.net/background.svg'); background-position-x: right; background-size: 100% auto; background-repeat:…
Bertuz
  • 2,390
  • 3
  • 25
  • 50
1
vote
2 answers

Resize div background image

I have to set background images (sprite pngs) within 3 divs. I need the pngs to resize with the div size as it's a fluid layout. I've looked around for a solution to this and can only find solutions using within the html. I appreciate this…
circey
  • 2,032
  • 6
  • 35
  • 51
1
vote
2 answers

Use backstretch inside a division AND reduce width to width of division

I'm attempting to use backstretch inside a division. I've figured out how to do that here but the width of the image is still stretching to fill the entire body. Is there a way to control the backstretch image so that it fills the height and width…
Josh M
  • 131
  • 1
  • 7
1
vote
2 answers

How to put a background image in a webpage with a header

What I have to begin with: http://jsbin.com/opokev/39 Problems the image scales and compresses according to the browser window size. For example If I open firebug (which takes half of the page) the background image compresses and does not look…
yogashi
  • 273
  • 1
  • 5
  • 11
1
vote
1 answer

URL isn't working after production build in tailwind

The image URL in my project before the production build is working fine in VITE server environment, but after production build it isn't showing the correct path of the image in HTML. Other images are working fine except this one which is the only…
Muhammad Kaleem Raza
  • 23
  • 6
1
vote
2 answers

Auto-resize non-background image to fill container div

I'm trying to have an image stretch and fill a container div with an image overlay to give it a rounded effect. If the container div height is larger than the image it shows the background color. Anyway to have that image stretch to fill the div…
Aaron Blomberg
  • 77
  • 10
1
vote
2 answers

Javascript - Retrieve background image url is null

I want to retrieve background image from this link https://20.detik.com/sosok/20220108-220109036/tangis-rindu-pak-ogah-pada-pak-raden but the output is null
fathimah
  • 31
  • 5
1
vote
1 answer

Why my background image zoom in when i click on select input

I´m coding a react webapp but in my Home page, when i click the select input the background image zoom in and that is not what i want. I have been thinking about what would be the problem like the overflow or maybe the way the background image is…
Alexandro Pineda
  • 706
  • 3
  • 10
1
vote
1 answer

Is it possible to use image background "linear-gradient(to left, green 70%,red 30%)" to react native app?

I able to made it by html,css,jquery here is my html code : ` var total_time_in_sec = 10 var also_have_in_sec = 9; setInterval(() => { if (also_have_in_sec > 1) { var green_percent = Math.round(also_have_in_sec /…
Arafat Hossin
  • 35
  • 4
1
vote
0 answers

Anime.js not working with CSS color: transparent for background mask

I'm playing around with anime.js at the moment, trying to get some text effects. The idea is ultimately to have an adjective shifting within an otherwise fixed header message, which is why I've layered the text with grid. At the same time, I've…
zagreos
  • 11
  • 1
1
vote
3 answers

background image after the header

Working Demo: http://jsbin.com/opokev/54 I'm working on having this image as the background image and also have a header as well, however, as the demo shows my header is cutting onto the image. How can I correct this so that first the header draws…
Mike
  • 1,361
  • 2
  • 13
  • 13
1
vote
1 answer

How to make this effect

I came across a mouseover effect on a website that I would like to learn as a "CSS animation beginner". It's about a background image/video which seems to hide behind another static BG image. You only ever see a section of the hidden image at the…
Romina Möller
  • 13
  • 3
1
vote
3 answers

Change background image - Android

I have main.xml file where is my background file:
jundymek
  • 1,013
  • 4
  • 18
  • 40
1
vote
2 answers

How do I edit the background image height without stretching?

I am trying to make the background image the full height of the device screen but, I keep running into a blocker and it only fills the screen above the text. I've been trying to be mindful of the fact that the background image also needs a lowered…
Lemon
  • 11
  • 3
1
vote
1 answer

How do I remove white space from around a body background image?

I've used every trick in the poorly-documented book (bad joke pun intended) and there is still a white border around my background image. I am using Bootstrap but I've slapped important tags everywhere it counts, so I doubt that is what is causing…
user16569720
1 2 3
…
99 100