Struggling to figure out Visual Studio Code - Having trouble loading images and fonts into my CSS file

It seems like I'm missing something here (just so you know, I'm totally new at this). I attempted to use fonts that are loaded on my computer for my CSS stylesheet (font file in my VSC), but no luck. I also tried using images from my files as backgrounds, with the same result - nada.

I've gone through a few different approaches, such as trying to set the background of my < body > tag using an image:

body {
    background-image: url(img\tire background.jpg);
}   

/* I even tried various versions just to make sure it wasn't getting lost or was too small/large*/

body {
    background-image: url(..\img\tire background.jpg);
}  

body {
    background-image: url('..\img\tire background.jpg');
}  

body {
    background-image: url('img\tire background.jpg');
}  

I also experimented with providing the full path:

body {
    background-image: url(C:\Users\BradJen\Desktop\Big Toyz Coding Project 1\big-toyz\img\tire background.jpg);
}

(trying all sorts of quotes, formats, etc.)

Ironically, everything works fine when I link to resources online or use them directly in my HTML code. Even with the fonts! While I can import from Google Fonts without issue, any local resources give me grief. Strangely enough, I did manage to get it working once, only for the image to vanish after adding another image on top in my HTML document.

I've scoured the internet for solutions, but as a newcomer, most of the technical jargon goes straight over my head or doesn't address my specific problems. It's likely something incredibly simple and silly, but if anyone has any advice, I'd greatly appreciate it!

Answer №1

To start, make sure to replace the space in the file name with an underscore or dash. Also, keep in mind that the path you are searching for is relative to the calling CSS.

For example, if your setup looks like this:

https://i.sstatic.net/nyYHy.png

You're linking to the CSS in css/style.css from your index.html.

<link rel="stylesheet" href="css/style.css" />

If you want to use a file named kitten image.jpg (with a space in the name) in the body of your document:

In your css/style.css file:

body {
  background: url("../kitten\ image.jpg") 0 0 transparent no-repeat;
}

However, it's generally recommended to avoid spaces in filenames and opt for dashes or underscores instead to simplify things.

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

Struggling with Bootstrap 4 - need help with navbar and flexbox alignment issues

My goal is to recreate a navigation bar similar to this design: navbar I initially attempted to use the grid system for my navbar, but it didn't work out as expected. After some research, I found that using the grid system for navbars is not recomme ...

Issues with 'floating' unordered lists

.menu li { float: left; color: #fff; font-weight: bold; } .menu li a { display: block; height: 20px; min-width: 110px; text-decoration: none; border-radius: 3px; padding: 4px; padding-left: 6px; padding-right: 6p ...

Ensuring radio button validation prior to redirecting to contact form

I created a survey form using HTML and CSS. I am looking to add validation to the questions before redirecting to the Contact form page. Currently, when a user clicks on the submit button in the Survey form, the page redirects to the contact form. Howeve ...

What is the best way to design a layout utilizing the "display: inline-block, block, or inline" properties in a style sheet?

Currently facing an issue with incorrect output. Code Snippet: <!DOCTYPE html> <html> <head> <style> .largebox { display: block; margin: 10px; border: 3px solid #73AD21; } .box1 { display:inline-block; width:20%; heig ...

Hide the menu when a user taps on an item on mobile or tablet devices

I'm facing a unique challenge and could use some guidance. The issue is with the mobile version of my website, accessible at . On tablets or mobile devices, the menu is condensed into a button. To navigate through the menu, I have to click the button ...

Add a decorative frame around the heading and text block

I'm looking to encase both the header and paragraph in a single border. Right now, they each have their own separate borders. How can I combine them into one? <style type="text/css> h1, p { font-family: consolas; border: 2px solid #73AD21; bor ...

Error in jQuery submenu positioning issue

I am attempting to design a menu that opens when the parent element is clicked and closes when the mouse leaves the previously opened one. It should operate from left to right. Here is an example: <ul class="menuFirst"> <li><im ...

Align the Media center div within a column utilizing Bootstrap

I have a template in html with a media object containing a logo and text, both within a column of width 5. Currently, it is not centered and aligned to the left. I am looking for a way to centrally align the media block within the column, regardless of its ...

What is the best way to attach a button to a mat-drawer?

I am facing an issue with aligning a button to a mat drawer located to the right of the screen to ensure a clear overall design. Check out this example How can I achieve this alignment? My current approach involves placing the button inside the drawer an ...

Avoid placing the label within a form-inline in Bootstrap to maintain proper formatting and alignment

I am working on a form where I have two fields inline within a form-inline div. I am looking to move the labels of these fields above them rather than next to them. How can I achieve this without affecting the layout of the fields? Here is a CodePen link ...

The jQuery plugin functions smoothly when running on localhost, but it causes issues with the background image when deployed on the web

I created a compact plugin to show a cookie message. While testing it on my local machine, everything functioned smoothly without affecting any web pages. However, once I transferred the files to the server, I encountered issues such as: A background ima ...

I'm curious as to why these two divs are positioned side by side. Can anyone shed some light on why this footer isn't functioning properly

My goal is to showcase the logo along with 3 buttons containing all the social media links underneath it. However, for some reason, my 2 divs are displaying inline instead of flex or block. Can anyone shed light on why this isn't functioning as expect ...

Issues with Laravel 5.8 and Bootstrap not functioning properly in Jquery

Check out this link for using Bootstrap Select. The code works perfectly in the view, but when I try to implement it with jQuery below, it doesn't work. Can someone help me fix this issue? View Code: <table id="tableAppointment" style=&q ...

Three.js - Optimizing and Handling Images - Best Practices

My current project has a unique concept: https://i.sstatic.net/Jd3Ot.jpg The main idea revolves around a virtual room that dynamically adjusts its height based on the number of images loaded by the user. While it functions smoothly with fewer pictures, ...

What is the best way to close the space between a box-shadow and a div background when incorporating semi-transparent rgba() values?

There seems to be an issue arising when applying partially transparent rgba() background-color and box-shadow color values to an element with a non-fixed (percent-based) border-radius. This combination results in a minuscule transparent gap appearing at th ...

Vue - unable to display component CSS classes in application when using class-style bindings

Just diving into Vue and starting with class-style binding syntax. I'm facing an issue where the CSS classes for header and footer that I've defined are not displaying, even though I've referenced them in the component tags. Can't seem ...

Why is it necessary to utilize absolute positioning in CSS?

Check out this link According to the link, an element with absolute positioning is placed in relation to its first parent element that has a position other than static. If no such element exists, then it refers to the containing block which is <html& ...

Issue with rendering of Outlined select label in Material UI not functioning correctly

According to the demonstration, the position of the label for a Material UI outlined select input should be at the top border of the select box. However, in my application, it seems like the z-index of the label is causing it to appear behind the top bord ...

An element featuring a background color is vertically aligned in the middle of its parent container

Struggling to achieve a seemingly simple task, but coming up short on finding a solution. The goal is to have a background-color that aligns vertically in the middle of the first and last images in a stack of images. It may sound more complicated than it a ...

Truncate a string in Kendo Grid without any white spaces

While using a Kendo-Grid for filtering, I've come across an issue where my cell does not display the full string if there is no white space. The problem can be seen in the image below: For example, the string "https://www.linkedi/Testing" is only dis ...