CodeIgniter Forums
Background image does not appear in some views. - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: Background image does not appear in some views. (/showthread.php?tid=90807)



Background image does not appear in some views. - Clarasandri - 05-07-2024

I am new to Codeigniter and php and web development so this could have a really simple solution.

I have set a background image in a main_layout that is called in every view (I had the code for the background on each page instead of on the main_layout and it made no difference). The image works just fine in the majority of my views. The problem is that the image does not appear on any view that has a route with a variable (I don't know the correct name for it but something like: " $routes->get('/edit/(:alphanum)', 'Main::edit/$1') ").  

Code:
  <div class="bg-image overflow-hidden " style="
    background-image: url('../public/assets/images/aspersor_fundo_joao_vertical.jpg');
    background-size: cover;
    height: 100vh;">

        <div class="mask" style="background-color: rgba(0, 0, 0, 0.3); height:100vh;">


If I change the class from "bg-image" to "bg-success" the background turns green, so the problem is probably in the loading of the image but I have no idea why it works in every other view but does not work on the views with variable url.

I had a similar problem with filters until I finally figured out that I had to put a "*" on the end of the route in order for the filter to access every possible combination of '/edit/(:alphanum)' but now I just can't find a solution. 

Any help is welcome.


RE: Background image does not appear in some views. - ozornick - 05-08-2024

Try, https://codeigniter4.github.io/userguide/helpers/url_helper.html#base_url
PHP Code:
background-imageurl('<?= base_url("assets/images/aspersor_fundo_joao_vertical.jpg") ?>');