Solution: Because I was using a relative path instead of an absolute path, so it looks more like this:
background-image: url('/img/bg.png');
Need ideas on how to apply a bg-image/pattern to another blade component
I need ideas on how to set an image background to another page where Im using a blade layout component, I know it might sound like a trivial task but I've never had to do this, it's not currently breaking the aesthetics but I found it odds cool visuals to the page.
Basically the image is not being displayed on my show.blade.php, the latter mentioned makes use of a layout file, app.blade.php so in theory anything inside of it would be automatically injected, no?
So here's what I did, at first for my index page Im showing this bg-pattern: https://imgur.com/kzS5Q9z (you may have to zoom in a little bit to see it) and since I am using TailwindCSS and I believe you can't use the url option for a background-image what I did was to create a style tag in my app.blade.php file, like this:
<style>
body {
background-image: url('img/bg.png');
background-size: 480px 270px;
background-repeat: repeat;
background-color: #1e3a8a;
}
</style>
And then that worked, but, the image created some borders outside of the limits of the box container so I had to apply a background colour, the same from the image and that made it better, then I adjusted the size of the box and it was all good, at least for the index.blade.php
After seeing that the bg-image wasn't being displayed on the show page, I tried a few things like adding the style tag in the show file directly, on top of the layout component but that didn't worked, so then I made the style tag a blade component and then I tried adding it on top of the layout component, but that did not worked also. It looked like this:
Show
<x-style-tag>
</x-style-tag>
<x-app-layout>
</x-app-layout>
Like I said i rarely use background images for anything since they can bring in a lot of visual noise but I thought this kind of pattern can bring a unique element into the page, another thing I thought of implementing was also to add some z-index into the bg-image but I think that is unlikely to happen, since I am using TailwindCSS and I doubt they have a feature for background images, at least I am not aware of it, so any ideas?? :D Thanks!
If you need to see the code: https://github.com/eduardonwa/playazchoice
I have also a live website of this project here: https://playazchoice.herokuapp.com/
Please or to participate in this conversation.