cssbackground-image
How to set background-image to an image in your source folder?
I am trying to display an image I have in my source folder as the background-image of my Jumbotron below:
<div class="jumbotron" style="background-image: url(assets\images\bar.jpg); background-size: 100%;"></div>
The assets/images/bar.jpg path displays the image with a regular tag, but it isn't appearing when used as a url above.
This is where my image is stored:
src/assets/images/bar.jpg
And here is where my HTML is:
src/app/event-page/event-page.component.html
Can someone please tell me what changes I need to make so that this image is displayed in the background of my jumbotron? Thanks a lot!
Solution
As Abdul Basit said, you need to do ../../assets/images/bar.jpg
- make html text input field grow as I type?
- HTML text-overflow ellipsis detection
- Dynamic Flickr background image for CSS tag
- Applying a Stylesheet Within One Div Only
- Why `cursor: pointer` and `:hover` property is not being applied?
- Height of flex element is not respected unless display: table is set?
- InertiaJS - Vue - Laravel : Utilizing CSS Files
- How can I center the title in Appbar.Header in react-native-paper?
- How to exactly specify the height of a navigation bar
- Javascript carousel like-presentation gallery
- min-height:100%; height:100%; not working
- I'm trying to place the placeholder in the border of the input field
- Float CSS attribute causing parent div not to inherit height?
- Using margin on flex items
- CSS After Element to insert mailto link?
- Can I create a div with a Curved bottom?
- Position sticky on thead
- Is it possible to have a default CSS style if no other styles are applied?
- Lenis Scroll: Unable to scroll to bottom of page
- Svelte Responsive Menu does not show vertical items on narrow screen
- CSS Print Layout - Printing on a Single Page
- CSS print media query prints only first page
- Triple dot CSS animation on a loading screen
- Choosing the most ideal font format
- How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?
- Logging when a CSS variable not found
- Why does `justify-content: stretch` require `flex-grow` to make input elements expand
- Add CSS cursor property when using "pointer-events: none"
- Auto-adjusting textarea to be the same height as inner-text onkeydown
- Continuous CSS rotation animation on hover, animated back to 0deg on hover out