The page is failing to load the style.css file, resulting in an

Within my project directory, I have the following files:

style.css

located in the Content folder, as well as

image.jpg

found in the Images folder.

https://i.sstatic.net/IKArS.jpg

The default page is Login.aspx.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="LoginDemo.Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <link href="~/Content/style.css" rel="stylesheet" type="text/css" media="screen" runat="server" />

    <title>LOGIN</title>

</head>
<body>
</body>
</html>

Additionally, here is the CSS code:

*{
    margin:0px;
    padding:0px;
}

body{
    background-image:url(Images/image.jpg);
    background-size:cover;
    background-attachment:fixed;
    font-family:Times New Roman ;
}

Although the page loads successfully, the background image fails to load. I have researched various solutions but am still facing the issue. Any assistance would be greatly appreciated.

Answer №1

The images are located outside of the Content folder. Therefore, in your CSS file, you need to navigate one folder back:

  background-image:url(../Images/picture.jpg);

Make sure to include ../ before the Images folder in the file path

Answer №2

Before using the image path in your CSS code, make sure to enclose it in single quotes and use (..) to reference the up directory. Update your CSS with these lines:

*{
    margin:0px;
    padding:0px;
}

body{
    background-image:url('../Images/image.jpg');
    background-size:cover;
    background-attachment:fixed;
    font-family:Times New Roman ;
}

Have you checked where your webpage is located? Is it in a specific directory?

Answer №3

If you encounter an error in the style.css file and the compiler seems to be ignoring it, try cleaning the solution and rebuilding it. This should resolve the issue and get everything working properly again.

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

Is there a way to add a dynamic animation of steam rising from a coffee cup to my SVG icon design?

I'm a budding graphic designer eager to master the art of SVG animated icons and coding. Recently, I created an SVG file of a beautiful cup of coffee using Illustrator and now I want to make the steam rise realistically through animation. However, des ...

I require a picture to fill up as much space as possible, regardless of its initial dimensions

As I work on my react-native app, I encounter a challenge regarding the layout. My application consists of a top bar and a bottom bar with an image in between. The image needs to fill up as much space as possible without overlapping the bars. Despite numer ...

Tips for visually conveying the values of x and y using SVG symbols

I recently came across a blog post discussing the use of SVG symbols for icons, which inspired me to create representations of symbols using svg files. The original svgs I used had properties like x, y, height and width. However, when I tried adding these ...

Ways to adjust the height of a Vuetify v-autocomplete listbox (results area) through CSS

I'm looking to adjust the height of the Vuetify v-autocomplete component, which is currently set at 304px (possibly a calculated value). <v-autocomplete class="flex-grow-0 ml-16 mr-6 largecontent" prepend-inner-icon="mdi-magn ...

Using Selenium to locate and click on a hyperlink within a table by identifying it with its displayed name

In my case, I have a table that displays records of school districts. My goal is to use Selenium in order to select the delete icon positioned in the eighth td for the district located on a row with a specific name. In this scenario, the name being QA__run ...

Utilizing jQuery to Adjust Tab Transparency

I'm trying to add some opacity to my jQuery tabs, but so far I've only been successful with accordions. Any tips or tricks for achieving this effect with tabs? Styling with CSS .ui-tabs{ background-image: none; background: rgba(204, 204 ...

Unique Selector Customization

Is there a way to style all custom elements in CSS? I am looking to make custom elements default to block display (as most browsers render them inline by default) and then adjust as needed. A potential rule I have in mind is: *::custom { display: blo ...

Menu Tabs with Rounded Edges

Seeking help to round the corners of a tabbed dynamic menu using Drupal and the dynamic-persistent-menu module. The code provided below is almost perfect, with 99% accuracy. View the current state of the menu here: . Can anyone assist in achieving the rema ...

The powerhouse duo of ASP .NET AJAX and JQuery

I'm attempting to create a basic JQuery example for making AJAX calls to a .NET webservice. However, when using the code snippet below, I am encountering AJAX errors with just a result of 0 instead of any helpful message: Javascript Call function QS ...

What is the best way to resize an image for mobile site optimization?

I've been struggling with resizing an image by its width for different mobile devices even after trying to search on Google. Here's what I have attempted: CSS: img.test { width: 100%; height: auto; } HTML: <html> <head> ...

Adjust the height of the box based on the content within its flexbox

I have a flexbox div nested inside another div, and I'm trying to adjust the height of the outer box based on the content of the inner flexbox. Here is the link to the current fiddle. The issue I am facing is that the text in the second box overflows ...

The Bootstrap Input-Group with Spinner displays an unusual spinning shape that resembles the letter D

I am encountering an issue with a unique form that sends each line of input as a separate request upon submission. I am looking to add a spinner at the end of each line, but I am facing a problem where instead of a circular spinner, I am getting a spinning ...

Issues with footers in IE 10/11 and Edge when using Grid layout

In the latest versions of Chrome, Firefox, Opera, IE 10/11 and Edge, the Grid layout below works perfectly fine. The only issue is with the Microsoft browsers where the footer fails to start scrolling when the content exceeds the screen size, leaving it fi ...

Guide on populating combobox using JSON API

I'm facing an issue with populating my combo box using API data due to a JSON problem. Here is the API Call: string URL = @"https://localhost:44306/api/user/68/all"; Uri Urladdress = new Uri(URL); HttpWebRequest request = Web ...

Troubleshooting Media Queries in HTML, CSS, Bootstrap: Why Aren't They Applying as Expected?

I am still fairly new to web programming and just starting out with bootstrap. After creating a section of my page that worked well on larger screens, I realized it wasn't responsive enough on smaller devices. The height was set at 400px, causing hor ...

What is the best way to hide a div when an image is positioned on top of it?

Previously, I inquired about creating a "cursor mirror" where the movement of the cursor in the top section of a website would be mirrored in the opposite direction in the bottom section. You can find the original question here. Expanding on that concept, ...

JavaScript code often contains dates that are formatted in various ways

I need to perform validation in JavaScript by comparing DATES and TIME. I need to have the date in dd/MM/yyyy format, but I am unsure of the format it is currently taking. After debugging the JavaScript code, I discovered the format. The screenshot below ...

Create a custom navigation bar using Bootstrap styling

I am currently attempting to create a unique Navigation Bar design using bootstrap https://i.sstatic.net/HDGFw.jpg Here is the code snippet I am working on: <div class="navbar-header"> <button type="button" class="navbar-toggle" data- ...

"Implementing database updates with AJAX and utilizing the PUT method: a step-by-step guide

I am attempting to update a database property named "Estado" using ajax. Here is the code I am using: function updateDatabaseProperty(idMarker, newState) { $.ajax ({ url: `/api/IgnicoesAPI/${idMarker}`, type: 'PUT ...

Issue with Firefox translateZ causing only half of the content to be visible on initial load in Pure CSS Parallax configurations

Recently, I've been experimenting with creating a parallax website and have been following the helpful steps outlined by Keith Clark. However, I've run into an issue that seems to be specific to Firefox. Upon loading the site, I noticed that the ...