The previous background image that was functioning properly is no longer showing up after upgrading to Laravel 6.0

I'm struggling with getting a background image to show in my view that contains a <body></body> tag. I was able to do it before, but now it's not working. The background image is downloaded on my computer and stored in the public folder of my Laravel project.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="{{ asset('js/app.js') }}" defer></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <title>ACAVUCAB</title>
    <style>
        body {
            padding-top: 56px;
            background-image: url(fondo_cerveza1.jpg);
            background-size: cover;
        }
        .dropnegro {
            color: #141519;
            text-align: center;

        }
        nav.navbar {
            background: #141519;
            background: linear-gradient(to right, #424448, #B7BCCD);
        }
        .tamano {
            font-size: 16px;
        }
        .tope {
            margin-top: 10px;
        }
        .centro {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="app">
    @yield('content')
</div>
</body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</html>

Answer №1

The problem was related to the relative path. I had to use url("/beer_background.jpg");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most straightforward method to access these four buttons?

Looking to create 4 interactive buttons with a unique behavior. When clicked, the chosen button will change its background image while the other 3 buttons retain their original background image unless hovered over by the user. Additionally, hovering over a ...

Whenever I implement JavaScript validation on my HTML page, it causes the page to become un

Whenever I try to enter more than 30 to 40 characters in the password input field on my HTML page, all web browsers become unresponsive. This issue persists even if I modify the minimum length and other requirements to 50. I am new to JavaScript. <!D ...

What is the proper way to position my unique dot beside my custom numeral in a ordered sequence?

When creating an ordered list in HTML, I encountered a challenge. I wanted to display the numbers in a different color from the text and also add a dot next to each number. After some trial and error with CSS styling, I was able to achieve this effect suc ...

Show only the present y-coordinate in the ToolTip of a chart.js

I am currently working on developing a chart using Chart.js, and my goal is to only show the y-axis value in the tooltip. The current display shows: date name_of_line: measurement example: Jan 1, 2020, 8:00:00 AM 5th Percentile: 100 oz. However, I would ...

Learn the process of passing props from Laravel to Vue in a seamless manner

Recently getting started with Vue. I have been trying to pass props from Laravel to Vue, but unfortunately encountered an error. Any help in finding my mistake is highly appreciated. https://i.sstatic.net/Ma6sr.png https://i.sstatic.net/8HCz9.png <job ...

Catalog of items in Mustache

I am currently working on generating HTML content using the mustache template engine. However, I have encountered an issue when trying to render a list of objects. Below is an example of my object: var Prod={ "Object1": { "name": "name1", "cat ...

Is there a way to retrieve files stored on my hard drive within a webpage?

I have a large number of files stored on my hard drive, all following the same format, 2014.C1.012.012 - full name of the file. They each have unique numbers and names. I want to create a local webpage where I can organize these files into a table w ...

Adding a see-through Bootstrap Navbar to a Fullpage.js website: A step-by-step guide

I am trying to incorporate a transparent Bootstrap Navbar into my page that is using fullpage.js. The desired outcome is for the navbar to stay on top of the page without affecting the layout of the website content. I have referenced an example here, but ...

Save the barcode image created using milon/barcode to the designated storage folder within my Laravel application

I have successfully integrated a library to create barcode images in my Laravel project. You can find the library here: https://github.com/milon/barcode After generating the barcode image, I am now looking to save it in my storage folder. To create the b ...

The Laravel form is not properly updating the values in the database; it seems to be deleting them instead

I encountered an issue with my form where I can change the user role. Whenever I attempt to make a change and click the Save button, I receive an error stating "invalid foreach() argument," and the previous record in the database for this user gets deleted ...

How to Filter, Sort, and Display Distinct Records in an HTML Table with jQuery, JavaScript, and

In the HTML page, there will be a total of 6 tabs labeled A, B, C, D, E, and F along with 2 dropdowns. The expected behavior is as follows: The user will choose a value from the 2 dropdown menus. Based on the selected value, filtering should be applied to ...

Using Bootstrap to create a fixed footer in Laravel

I have a Laravel project with Bootstrap added as the CSS. I have tried everything to make my sticky footer work, but when the page is longer than the window, it remains at the bottom of the window when scrolled up. Here is my main: <html> <head& ...

The Vue component is successfully rendering on localhost, but is not displaying on the server when using Laravel 5.4 with Passport

I attempted to configure an Oauth2.0 server using Passport within Laravel 5.4 by following the steps outlined at . I successfully set it up on my local host, but encountered issues when deploying the code to my production server. Upon accessing the applica ...

CSS Grid ensures uniformity in the spacing between columns

Is there a way to ensure the spacing between items is consistent? I attempted to use grid-column-gap, but the gap varies because the number of items on each row differs. The first and third rows have a larger gap compared to the second row, which has the ...

Track how long a webpage element remains in view using Seleniumwebdriver

After interacting with the page, a loader briefly appears and then disappears from the page html. <div class="loader"> <img src="/static/media/loading-anim-windmill.9f645983.gif" alt="loading"><p>Loading...&l ...

Prevent horizontal HTML scrolling while displaying a layer

I am currently working with a .layer div element that darkens the page to highlight a modal. However, I have encountered an issue where upon triggering the event, the div does not occupy 100% of the screen and the original browser scroll bar disappears. I ...

Troubleshooting issue with AngularJS $http.get function failing to show retrieved

My data is showing up when I call the URL from dataSource, but it's not displaying when I use $http.get. I am sending this data to a dx-chart using a JsonResult from my controller. Below is the code snippet that includes my AngularJS file and MVC View ...

Fix background transition and add background dim effect on hover - check out the fiddle!

I'm facing a challenging situation here. I have a container with a background image, and inside it, there are 3 small circles. My goal is to make the background image zoom in when I hover over it, and dim the background image when I hover over any of ...

Modifying the color of drawings on a Javascript canvas

I am currently working on developing a drawing board using HTML and JavaScript (Node.js on the server side). One challenge I'm facing is implementing a color picker that allows users to change the paint color dynamically. While I could hard code the c ...

Unable to control the content within the Repeater DIV

When working inside a repeater's ItemTemplate, I encountered an issue where only the first image/div toggled visibility when the toggle button/link was pressed. The images are dynamically loaded from the database and the toggle function seems to only ...