Incorporate a Background Image, which is linked to a website URL, by utilizing an external CSS file within

I am struggling to incorporate an external CSS file (specifically a background image from a URL) into my HTML document. I have successfully applied internal CSS, so the issue is not with the website link. Despite reviewing similar posts addressing comparable issues, I haven't been able to resolve my problem. As a novice in this field, I suspect the solution may be simple yet eluding me. After investing numerous hours, I reluctantly seek assistance from the knowledgeable online community. Below is my Practice.css code:

body{
background-color: whitesmoke;
background-image: url("https://static.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg");
background-repeat: no-repeat;
background-size: 1400px 750px;}

And here is my Practice.html code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/Practice.css"/>
</head>
<body>
</body>
</html>

'CSS' refers to the folder where Practice.css resides. I appreciate any help offered in advance.

Answer №1

Your stylesheet can be hosted anywhere on the internet. However, if you are referencing a file directly from your computer, you may encounter some issues. To ensure smooth functioning, it is recommended to place your CSS folder in a different root directory than your HTML index file. In your specific scenario, your link to the CSS should look like this:

<link rel="stylesheet" type="text/css" href="../CSS/Practice.css"/>
When the HTML and CSS folders share the same root directory, the HTML file and CSS file are not directly connected. The path should first point to the root where both folders reside, using ../, and then specify the location of the CSS folder and file as ../CSS/Practice.css.

Answer №2

Based on the feedback provided, it seems like your HTML and CSS files are located in separate directories named HTML and CSS within a main directory named ComputerPrograms. Therefore, when referencing the .css file from your html page, the correct path should be:

<link rel="stylesheet" type="text/css" href="../CSS/Practice.css"/>

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

Exploring Ancestors with Jquery to Find Input Fields

In my current project, I am working on a function that needs to extract the values from two input fields within a specific div element. These values will then be added to an array and posted as JSON data. However, I am facing difficulties in navigating thr ...

How can a method inside an object property of the same class be invoked in JavaScript?

I'm faced with a bit of confusion here. I have a class property called hotspot of type object, declared as follows: Cannon.prototype.hotspot = {stuff: this.blah(...) }; The method blah() is actually a prototype of the same 'class': Canno ...

Adjusting the letter spacing of individual characters using HTML and CSS

Is there a way to set letter-spacing for each character with different sizes as the user types in a text box? I attempted to use letter-spacing in CSS, but it changed all characters to the same size. Is there a possible solution for this? Here is the code ...

Creating a connection between a secondary jQuery anything slider and a distinct CSS style on a webpage

Currently, I am attempting to incorporate two anything sliders within the same webpage. My goal is to apply unique styling to each slider. Despite my efforts, I am encountering difficulties in calling upon a second style sheet without it completely overr ...

Designing a card flip animation featuring front and back faces without using absolute positioning

Looking to enhance my website with a new feature that incorporates the card-flipper schema found on David Walsh's site: https://davidwalsh.name/css-flip. The challenge arises from the fact that the content within my cards is dynamic, making the height ...

Are you looking to test your website's performance under limited bandwidth conditions

Similar Query: How can I test a website for low bandwidth? Would it be possible to mimic a slow internet connection to test my website's performance? I need to simulate lower speed conditions in order to observe how the site behaves. ...

Move the element that can be dragged with the identifier X to the designated drop area with the identifier

I am attempting to create a function that will allow me to drag a draggable element and drop it into a designated container using their IDs. However, I am unsure of how to get started. dropToContainer("myDraggable", "div3"); function dropToContainer(co ...

Innovative JavaScript function

Seeking a solution for my JavaScript function that should only be executed when the browser screen width exceeds 1024px. if ($(window).width() > 1024) { An issue arises when a user initially loads the webpage on an 800px browser screen and then resize ...

Is there a way to align six columns on the left side and have a dynamic column on the right that fills the width of the browser window?

Is there a way to make a fluid container in Bootstrap 5 that contains a normal container on the left with 6 columns of content, while allowing the right side of the container to expand to the end of the browser window? When using a normal fluid container, ...

Element mysteriously concealed in certain Safari cases, consistently visible in Firefox and Chrome

A new angular application has been developed as a "bounce" page for an upcoming social iOS app currently in public beta. Users have the ability to share their profiles by simply providing a link to the site. If the page is accessed via an iOS device w ...

Is there a bug causing the Admin LTE content height issue? Looking for solutions to fix it

What's the reason behind the oversized footer? The footer appears normal when I resize or zoom the page, why is that? How can this be resolved? ...

I'm having trouble getting my flex items to maintain a specific width and height while staying in a single line

I've been out of practice with flexbox for some time and I can't figure out why the width and height properties are not being applied to each flex item as expected. All the items seem to have an equal width, but not the width that I specified. Ad ...

Is it possible to drag and drop without using jQuery UI?

Currently, I'm developing a jquery plugin that incorporates drag and drop functionalities using HTML5 drag attributes. The functionality is working well, except for one issue - linking the function names to their designated targets. Although the func ...

Unable to find '.file.scss' in the directory '../pages'

I am currently in the process of migrating my Ionic 3 app to version 4. However, I have encountered an issue where some pages are not recognizing the SCSS file from the TypeScript component. @Component({ selector: 'car-id', templateUrl: &apo ...

Is there a way to eliminate the scrollbar from the purecss navbar?

My website utilizes pure.css and the navbar has more elements than can fit on a small screen without scrolling. This results in an unwanted scrollbar appearing. I want the navbar to remain at the top so that it scrolls along with the content. However, when ...

How can I make the hover effect only apply to the text and not the entire box?

I'm wondering how I can make the :hover property only affect individual letters in my navigation bar, instead of hovering over the entire box. * { margin: 0px; padding: 0px; } .navigation-bar { height: 3.2em; background: gray; text-align: ...

Is there a way to adjust the background color of the clicked tab with divs and revert the others back to their original color?

<span class="row top-bar-left align-items-center" style="width: 80%; float:left"> <div tabindex="1" class="link tab" routerLink="details" routerLinkActive="active" [qu ...

Creating a bespoke Bootstrap 4 Modal experience without the backdrop

I'm attempting to show a Bootstrap 4 modal without a backdrop. I've tried the following code with no success: .modal.right. modal-backdrop.show { background-color: transparent !important; } When I try this modification, it works (but affect ...

Adding flair to the selected element in the HTML nav bar

I was attempting to customize the appearance of the active item within an HTML navigation bar, which corresponds to the a element. To test this out, I used the example from Here is my modified code, where I introduced a new class "active" and applied the ...

Identify when a click occurs outside specific elements

I've been searching for solutions to address this issue, but so far nothing has worked. Here is the JavaScript code I am using: var specifiedElement = document.getElementById('a'); document.addEventListener('click', function(eve ...