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

Setting a divs background image using jquery in IE 6 and 7

Hi i am trying to apply a background image to a div using jquery. The code i use works fine in all browsers except IE 6 and 7 (the weakest browsers i need to support). If I statically apply a style tag to my div, it does show the image but when i…
aamiri
  • 2,420
  • 4
  • 38
  • 58
1
vote
1 answer

How do you set the backgroundImage property to a URL in a Rest API?

I'm trying to access a Rest API to get access to an image URL within. Character.Portrait has the url and it prints successfully. But when I try to change document.getElementById('portrait').style.backgroundImage It returns an empty string. I just…
Tkohldesac
  • 13
  • 5
1
vote
1 answer

Changing background image of react app based on component

I have googled around and tried various solutions but cannot seem to get my app to work correctly. I want my app to show a different background image based on what component is rendered on the screen. I am implementing this app with React Router and…
Slippy
  • 93
  • 1
  • 10
1
vote
2 answers

Rails 6/webpacker... how get background images to work BOTH in development and on Heroku?

In a Rails 6 app, I have an image file in app/assets/images/bgs/abc.jpg To attach that image to body background, how can I have a style declaration in a style tag in application.html.haml that works the same for both local development and when…
jpw
  • 18,697
  • 25
  • 111
  • 187
1
vote
3 answers

Tailwind custom background-image not working in production

In my CRA project I've added my own background images by editing the theme.backgroundImage section of my tailwind.config.js file. The images show up locally but not in production. In production the class (eg bg-1989) is applied but does not appear…
Madeline Petersen
  • 11
  • 1
  • 4
1
vote
1 answer

Only background image to be flipped

I have this code
Meridian Asllani
  • 11
  • 1
  • 4
1
vote
1 answer

im setting a background-image but its not showing unless i specify the height in pixels or vh

i am using reactjs and in my main page container i am setting a background image as such: .opening-container { background-image: url("../../images/sadaqashdbg.png"); background-position: center; background-size: cover; background-repeat:…
ayjammoul
  • 11
  • 2
1
vote
0 answers

how to add a specific opacity to a background image without affecting the child texts?

I try to put a background image with a low opacity but unfortunately the texts are also affected by the opacity. I tried to use background rgba and the pseudo element after without success. Do you have any suggestions? .news { display: grid; …
fou
  • 27
  • 4
1
vote
1 answer

Set complete background for Angular project

I tried many times and searched a lot about how to set image background for whole app in angular project. I tried global css and app.component.css but it just set background for component area. Here is my global css file: body { font-family:…
Mousavi
  • 95
  • 7
1
vote
1 answer

Inserting @media rule in a div element

i'm very new here and in coding, thanks for having me. I created a block and a widget in magento 2.4 page top to display as a banner promotion, but i want a different display for desktops and different for mobile. what i have tried: @media…
Frank Tobi
  • 25
  • 1
  • 4
1
vote
1 answer

fixed cover background stuttering response to change in viewport

Hello I have a website at: https://nusstudios.com If you look at the Blog from a mobile device (eg.: iOS) and you scroll up and down you will detect a well known stuttering due to change in viewport size. That is because of the following settings of…
Patrik Nusszer
  • 460
  • 3
  • 13
1
vote
0 answers

Overlapped background - text and background-color inconsistency

.background { width: 50%; height: 10rem; overflow:hidden; } .mysection { background-color: red; position:relative; margin-top:-4rem; } .mysection h1 { color: white; }
rickyc
  • 57
  • 7
1
vote
2 answers

background image placement

I have a span tag that I'm adding a background image to. I know there are many ways of doing this but wondered if there is a way to make the background image which is a small pdf icon move to the right of the text instead of the left of it.
Chapsterj
  • 6,483
  • 20
  • 70
  • 124
1
vote
3 answers

How get the gradient background in website which fills the whole page

i want to have the gradient as background image like this how can i achieve that EDIT: I want to stretch down to bottom , but if i repeat it then i see the top bar gain , i want that dark portion remain at bottom and central part expands
Mirage
  • 30,868
  • 62
  • 166
  • 261
1
vote
2 answers

Jumbotron Fixed Image Jumps

I'm coding a website for a friend, but the jumbotron background image keeps jumping when I scroll down the page. Can someone please explain to me what I am doing wrong? Thank you. Codepen link here: https://codepen.io/Bekahlea/pen/bGqNaVo .jumbotron…
Rebekah Jarrett
  • 11
  • 5
1 2 3
…
99
100