I am experiencing an issue with my Django project where the background body is not

I recently migrated my Django project to a new server and ran collectstatic. Afterwards, I served my Django site on uWSGI.

On the main page HTML code:

body id="skin-blur-city"

In project/static/css/style.css

    #skin-blur-city {
    background-image: url(../img/body/city.jpg);
}

The static directory is under my project directory in the Django settings file:

STATIC_ROOT = os.path.join(BASE_DIR, "static/")

The style.css file is located in project/static/css/

The image file can be found in project/static/img/body/city.jpg

However, the main page does not display the city.jpg background. When inspecting the source code from the browser after opening the page, I see that the body id="skin-blur-city" is in the HTML code, but it is not showing in the browser.

The web console CSS output in the browser shows errors related to Firefox Quantum 60.10esr 64-bit update:

 Keyframe rule ignored due to bad selector. animate.min.css:1:6679
...
Unknown property ‘user-select’. Declaration dropped. reps.css:270:15

Answer №1

The reason behind this was the specific browser I had been using. In the Style.css file, there were two different settings for the background display. On mobile devices and older browsers, only the background color was visible. However, on newer desktop PCs, the background image would appear. To resolve the issue, I switched from using Firefox on my CentOS GNOME desktop to using Firefox on my PC to view the project, which corrected the display.

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

Mastering the art of manipulating the Document Object Model in Vue.js

I have a situation where I am using v-for to display a lot of data in JSON as individual buttons. My goal is to change the background color of the button when it is clicked. I plan to use @click to bind a function to each button, and within that function, ...

"Having trouble getting `justify-between` to work in a tailwind CSS on an absolute

I'm currently using Tailwind CSS and I'm trying to position my navbar on top of an image. The image is set in a relative position and the navbar is set in an absolute position. Surprisingly, when the navbar is not set in the absolute position, I ...

Unusual limitation in jQuery/ASP.NET WebForms for text area character count

Utilizing www.lipsum.com to produce 2,000 characters, verifying the character count within the word and ensuring there are exactly 2,000 characters. Within ASP WebForms, I have the subsequent control: <asp:textbox runat="server" ID="txtComment" rows=" ...

accordion effect with a bundle of multi-anchor buttons

Working on a website where I need a navbar or anchor button to display content. Having an issue where all expanded items collapse when clicked for the first time, rather than following instructions as outlined in the JavaScript code. Here is the code snip ...

Turn off the nicescroll scroll bar that appears as a default feature

Is there a way to disable the nicescroll scroll bar that appears in red by default on my html page? It's causing issues with zooming in and breaking the layout. ...

I am looking to bring in just the tables from a different html/php page

I am currently working on a webpage that includes a php library, header, and other elements. I only need to import specific tables and information from this page onto another screen display, with the tables arranged side by side instead of vertically. My ...

The functionality of hiding and displaying div elements is malfunctioning

I am currently working on a side menu that contains two buttons. My goal is to display the content of the profile div by default, and when the user clicks on the My reviews button in the sidebar, I want to hide the content of the profile div and show the r ...

Dynamic CSS overlay based on database field content without requiring user interaction

Is there a way to automatically display overlays for specific options in a database field using Bootstrap code? The options are SOLD, CONTRACT, and NO. I need different overlays to appear for SOLD and CONTRACT, while no overlay is needed for the NO option ...

The div width set to 100% is not functioning properly upon the initial form loading in IE11, however, it is working

[![enter image description here][1]][1]Can anyone assist me in resolving this issue? When my Div with the id "Coverage" loads initially, its width is set to the content width. However, after a refresh, it expands to 100% width. This problem does not occu ...

Increase jQuery value by X each time it is clicked

I'm trying to create a custom next/prev navigation where clicking the "next" button will animate the margin left by X on each click until reaching the end (-320px), with a similar method for the back button. Here is the JavaScript code I've been ...

What is the best approach for resolving the issue of User having an Unknown field(s) (Id_card_number) specified in the system

I'm facing an issue with my code. Whenever I run a makemigrations command, it returns an error message saying Unknown field(s) (Id_card_number) specified for User. How can I resolve this problem? settings.py INSTALLED_APPS = [ 'django.contr ...

What are the steps to create custom pagination for tables?

Can you help me style a mui component in a similar way? https://i.sstatic.net/fxdvu.png I'm thinking of using the Pagination component and Select, but do you have any other suggestions? ...

The model name should not be overridden if it is already being used in different fields

I have a model that I am binding on two sides. The first side is inside an html p tag, and the second side is a textarea. When I make changes to the textarea, the content inside the p tag also changes. How can I ensure that only the content in the textar ...

JavaScript encounters an Access Denied error when attempting to read data from a JSON file in

My code is experiencing issues on IE browser and Chrome, but works perfectly on FireFox. var currentPage = 1; var max = 0; var myList = []; var links = []; $.ajax({ cache: false, type : 'GET', crossDomain: true, ...

Is it possible to use JQuery ScrollTop while in the midst of an animation?

I am facing an issue with resizing containers and scrolling to elements. I have 2 containers that change width dynamically, each containing clickable elements. When a container is clicked, it animates the resize. However, when a clickable element is clicke ...

Steps for updating the homepage to display a personalized welcome message to the user after logging in and redirecting using node.js and

Upon arriving at the homepage, simply click on the sign-in button. Once redirected back to the home page, you will notice a personalized greeting saying 'Welcome [user]'. Wondering how to achieve this? It's as simple as changing the text fro ...

Is it possible to utilize a separate, standalone stylesheet for media queries?

My understanding of media queries evolved when I discovered them yesterday during my research on creating mobile-optimized pages. I learned that a media query refers to a stylesheet that complements and supersedes the current one, which differed from what ...

Error: The webpage you were looking for in the lobby cannot be found due to a django-channels routing

routes.js from channels import include, route from chat import consumers from . import game_consumers channel_routing = [ #game routing route('websocket.connect', game_consumers.ws_connect_lobby, path=r"^/lobby/$"), route('webs ...

Embedding the current page URL in a hidden input field inside a form for submission

I am currently exploring ways to pass the URL of the current page through a hidden field in order to redirect back to that page after processing the form input. Initially, I attempted using javascript:location.href, but it seems to be passing it as a liter ...

Tips for preventing text wrapping in off-canvas design

Seeking advice for my Web Application prototype - looking to prevent text wrapping in off-canvas menu paragraphs using CSS or JS. New to building this type of menu, I used an example from W3Schools to achieve the current design. <!DOCTYPE html> ...