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

Jquery - background-image click

I have a div in the center of the page. I have the background-image in the body. I need to do using jquery click only on the background-image. If you click the div with id divPage, nothing happens. Thanks for the advice or possibly another…
Jenan
  • 3,408
  • 13
  • 62
  • 105
1
vote
3 answers

How to fix CSS background image not working?

I am trying to place a background image for a personal webpage and I have yet to find any solutions for my issue. All I get is a white background. File path for image: /personal-page/images/ales-nesetril-Im7lZjxeLhg-unsplash.jpg File path for code:…
Scruggs-I
  • 13
  • 3
1
vote
2 answers

pausing a jquery animation in the middle using delay. having some issues

$('textarea.contact').click(function(){ $(this).animate({"backgroundPosition": "+=350 -=150"}, 500).delay(500); $(this).animate({"backgroundPosition": "+=350 -=150"}, 500); }); I'm using a background position library in order to animate…
ionfish
  • 165
  • 4
  • 13
1
vote
3 answers

CSS Background Image not covering whole viewport width

CSS background is not covering whole viewport width while using media query @media (max-width: 62.5em) I tried using background-size: cover, background-position: top left, background-repeat: no-repeat but still nothing works. here's main CSS styles…
zer0-07
  • 30
  • 6
1
vote
1 answer

Change a cover image from url to a saved media image in a button

please, what can I do to change the source from images in a button? I actually receive them from an external website where I have access to an API, but I have saved them on my WordPress and would like to use them with the commands "img src" & "alt",…
Alberto
  • 37
  • 6
1
vote
2 answers

Tailwind CSS does not load Background Images in React App

I am using React with Tailwind CSS and trying to set a background image for one div. However, the background image isn't showing despite setting the tailwind.config.js and saving the image in the right place. Is there something I am missing which…
Julius Goddard
  • 249
  • 1
  • 3
  • 15
1
vote
1 answer

Make an image blend with a color as the website background

I am trying to add a background gradient image and have a color blend with it as my background image. The way I'm currently attempting to do it is by adding the image and then having a background color under the body CSS and then 'mix-blend-mode:…
ohmygodimpregnant
  • 227
  • 2
  • 11
1
vote
1 answer

How to make my background image not going out its div

I'm new. I've created a
inside a
and in this
I've added two background images using Gridlex. For some reasons, both photo go out of the container. I'd like to do something so both pictures don't go out of the container and take…
Melissa Couturier
  • 11
  • 2
1
vote
2 answers

Background image will not display and header does not adjust for reduced screen

Using a header tag with an h1, the h1 is showing with all the font modifications. The background image will not show. I have verified the image location is valid by using the same code for an img tag. The header will also not push down the lower…
thlisenby
  • 11
  • 2
1
vote
0 answers

card animation on hover on different cards with different background images

I have created a card animation on hover, but I need more than one card to have it with different backgrounds To explain better, I used Kevin Powell's tutorial CSS Card with hover animation and mobile fallback to make an animated card. Now I want to…
Jack Kay
  • 59
  • 2
1
vote
0 answers

how to add background image in MP line chart

I had try two ways to set new background image in MP line chart. But can't see background image. //one way binding.lineChart.setBackground(ContextCompat.getDrawable(getBaseContext(),R.drawable.ic_img)); //another way …
Josort
  • 11
  • 2
1
vote
1 answer

How can I make a page hero image move on page load?

I have a banner image loading on my site with this code: @keyframes animatedBanner { from { background-position-y: bottom; } to { background-position-y: top; } } .page-hero { background-image:…
rudtek
  • 373
  • 2
  • 17
1
vote
1 answer

Background image not covering whole screen

I have recently been creating a link in-bio page and I am trying to make the background image cover the whole screen but it is only covering parts of the screen where I have objects like a header or list. Below I have the CSS code that I used to…
Josh10187
  • 13
  • 3
1
vote
1 answer

linear-gradient with a border-radius at certain percentages

body { background-image: linear-gradient( 0deg, var(blue) 70%, var(red) 30% ) no-repeat; height: 100vh; } 1) How to add a border-radius at the exact bottom left and right corners of the red background-color? As i…
mockingbird
  • 53
  • 6
1
vote
1 answer

Using SVG as Content container

I'm trying to use an absolute positioned SVG in a container and should be able to scale on container resize and should flow with the content. The bottom content generated with SVG should keep the shape on resize or fluid content. Right now none of…
fefe
  • 8,755
  • 27
  • 104
  • 180
1 2 3
…
99 100