Styling with CSS to load a background image stored locally

Folder StructureI've been trying to set a background image using a local picture I have, but nothing seems to be working for me. I've checked out various websites for solutions, but everyone seems to have different instructions. I've experimented with different combinations of ../, ./, file///, and web/port_back. Some suggest including "" within the () while others don't. I've tried every possible combination with no luck. I've also cleared my cache multiple times just in case that was causing any issues.

My image is located at /Portfolio/port_back.JPG and My CSS file is located at /Portfolio/static/index_app/index.css

CSS:

body {
  background-image: url("../../port_back.jpg");
  /* background-repeat: no-repeat; */
  background-size: cover;
}

Answer №1

To access the file, go back 3 folders and use this code:

background-image: url("../../../port_back.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

How can you retrieve data from the currently active input element using Semantic UI?

How do I retrieve the value of the input field and assign it to the urlData Object? <input id="username"> The JavaScript code is as follows: $('#username').api({ action: 'check username', urlData: {username: $(this).val( ...

Using PHP to include a class in an input element

Recently, I've been working on a form that involves PHP form validation. In my CSS file, there's a class designated for invalid inputs that I'm trying to add to each one. To see an example, feel free to check out the JSFiddle here. The ".inv ...

accessing an unserialized field for OTP in Django

I'm currently facing a challenge in returning the OTP along with other serialized data in my response. The OTP is successfully stored in the user table, but I'm struggling to include it in the response since it's not submitted through the re ...

Can HTML tag attributes be accessed in CSS within the Shadow-DOM?

As I work on developing a custom component using StencilJS, I find myself needing to adjust the outline behavior when users navigate through it with either a keyboard or mouse. My component employs ShadowDOM and I aim to extract an HTML tag attribute from ...

Generate a new JSON reply using the current response

I received a JSON response that contains values for week 1, week 2, week 3, and week 4 under the 'week' key, along with counts based on categories (meetingHash) and weeks. I attempted to merge this data using the .reduce method but without succes ...

Placing a picture within a grid

Hi, I'm new to "programming" and seeking assistance here on stackoverflow. I'm encountering a slight issue trying to fit an image inside my grid layout. For example, when I have an image with a specific size, it works fine. However, if the imag ...

What is the process of choosing a language (English/French) within a pop-up?

<body style="text-align:center"> <h2>Popup</h2> <div class="popup" onclick="myFunction()">Interact with me to show/hide the popup! <span class="popuptext" id="myPopup">A Simple Popup!</span> </div> <script& ...

A guide on utilizing buttons within ion list items to execute actions independently for both the button and the list item

Currently, I have a list item with a button that is displayed based on a certain condition. My issue is that when I click the button, a popup should appear, but instead, it also navigates to the next page in the background. Can someone help me figure out h ...

Ensure that the top of a div stays in place as the user scrolls, and spans the entire width of the div

My goal is to create a sticky or fixed position header inside a div with a list, but I'm facing an issue where it only sticks to the width of the text. If I expand the width to 100%, it takes up the size of the entire page: import styled from 'st ...

The time interval for Google charts is from 8:00 in the morning until 7:45 in the evening

I'm facing an issue with Google charts. Specifically, I am working with a Google area chart: <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawCh ...

What's the best way to apply a margin top to an image using Tailwind CSS?

Is there a way to adjust the top margin of an image in Tailwind CSS? I'm having trouble making my logo clearly visible and think giving it some space at the top might help. How can I do this within the Tailwind CSS framework? https://i.sstatic.net/Ae ...

What is the best way to reduce the width of the navigation bar?

I've been working on creating a website for my friend, and I decided to include a table navigation bar to make it easier to navigate. Instead of duplicating the code, I separated the bar code into another file and used JavaScript to load it into each ...

Having trouble parsing emails in Python using the "imaplib" library, dealing with HTML line character limits, and handling extra non-Unicode characters

In my Python 3 project, I am working on validating emails that are sent to my inbox. I am using imaplib library to achieve this task. While I have successfully retrieved the email content, the mail appears to be unreadable and somewhat corrupted (reference ...

The functionality to clear the input search text upon clicking is malfunctioning

Why isn't this basic script working as expected? It has worked fine in the past, but now it's not functioning properly. <form name="form1"> <input type="search" placeholder="Search..." required="required" onfocus="if(this.value == &ap ...

Exploring and analyzing a Django application with uWSGI/Nginx configuration

Currently, I am in the midst of transferring a Django 1.4.2 application to new infrastructure and focusing on enhancing the system's performance with powerful hardware. In my quest to optimize, I am utilizing django-debug-toolbar alongside hotshots-ba ...

Troubleshooting Django: Error number 22

Greetings! I am currently trying to add comments to my Django blog project, but I encountered an OSError: [Errno 22] Invalid argument at "C:\Users\marci\PycharmProjects\08.04\blog\templates\" Below are my URLs: path(&ap ...

Steps to troubleshoot the TypeError: cv.Mat is not a constructor in opencv.js issue

Encountering a problem while trying to use opencv.js for detecting aruco markers from my camera. Each time I attempt to utilize the method let image = new cv.imread('img'); An error keeps popping up: TypeError: cv.Mat is not a constructor ...

Customize your Jquery UI Calendar with Changing Background Images for Each Month!

How can I change the background of jQuery UI datepicker based on the selected month? I have created 12 classes, each representing a month, and the selected month already has the background. I tried using "onChangeMonthYear: function(year, month, inst) { ...

Node.js provides a straightforward way to decode HTML code

Can strings with HTML-encoded characters like &#39;, &amp;, etc., be converted into plain character strings without using multiple str.replace(/&#39;/g, "'") statements? ...

Finding the next div by its ID using jQuery

Currently, the jQuery code provided only allows navigation from the Sport section to the Entertainment section. Is there a way to create a script that allows navigation between any div sections with just one piece of code? <div id="topBar"> &l ...