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:

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

What is the best way to address a row of hyperlink text located at the top of a webpage?

I have encountered an issue where three rows of text links near the top of a page shift up to the very top when a link is pressed, causing them to obscure a line of text that was already at the top. How can I keep the position of these three rows anchored? ...

To convert an image file into a string, use JSON.stringify before including it in an AJAX request

Is it possible to send image files contained within JSON objects in an array via an AJAX call using JSON.stringify? When attempting to send the data through an AJAX call, and utilizing JSON.stringify with an array containing JSON objects that have image f ...

Tips for aligning images directly alongside text without any separation

I'm currently learning html and facing some challenges with coding my own blog page. My main issue is trying to design a section that leads to the latest post, but I can't seem to get the layout right. I envision having the text and image neatl ...

Issue with responsive design: Media queries not applying max-width

GOAL I want the content of my page to adjust to screen sizes that are smaller than 600px wide. ISSUE When using the responsive tool in Chrome, preset screen sizes like iPhone X do not apply media queries properly. Even manually adjusting the screen size ...

Posting several pictures with Protractor

In my test suite, I have a specific scenario that requires the following steps: Click on a button. Upload an image from a specified directory. Wait for 15 seconds Repeat Steps 1-3 for all images in the specified directory. I need to figure out how to up ...

Unlocking the potential of the :not selector when combined with the :nth-of-type selector

My current project involves styling a table. I am looking to apply a specific background color to each odd row, excluding the first row which contains headers. I attempted the following code without success: .new-items-table tr:nth-of-type(odd):not(.new- ...

Vue application experiencing issues with applying Sweet Alert CSS styles

I successfully integrated vue-sweetalert2 into my Vue app (version 2.6). The setup in my main.js file looks like this: import VueSweetalert2 from 'vue-sweetalert2'; Vue.use(VueSweetalert2); In one of my components, I have a basic button with a ...

Creating a reference to a hyperlink or button in a variable

I am currently working on creating a login form for a school project website. The section that is posing a challenge for me is determining if I can assign a variable to a href or button. For instance, imagine that the href has the variable 'A' ...

What is the best way to vertically align my image for perfect centering?

On one of my pages at , there is a section titled "FREE PICK UP AND RECYCLING OF LARGE QUANTITIES OF ELECTRONICS" with a picture of a truck. The image is perfectly centered vertically between the pictures on its left and right. Another page I have at fea ...

Emphasize a specific portion of the text

While developing a project similar to Google Search using React.js and GoogleAPI, an issue arose. For instance, when searching "tea" on Google, the results display "Searches related to tea" at the bottom. The term "tea" appears in bold. How can this be imp ...

Exploring the `zoom` CSS attribute and adjusting font sizes on Safari

While my website is somewhat responsive on desktop, the display on iPad or tablet-sized devices leaves much to be desired. Despite having an acceptable layout, everything appears too large, making navigation difficult. It's worth noting that my websit ...

What is the best way to add the current date to a database?

code: <?php session_start(); if(isset($_POST['enq'])) { extract($_POST); $query = mysqli_query($link, "SELECT * FROM enquires2 WHERE email = '".$email. "'"); if(mysqli_num_rows($query) > 0) { echo '<script&g ...

Creating a Smooth Curve with CSS

Recently, I've decided to create a unique clock design inspired by the one showcased here. However, instead of using images like they did, I would like to implement ARC. Is it possible to create an arc using only CSS? For instance, if I wanted to make ...

adjusting dimensions of swf file within html code

I am trying to insert a small speaker icon from the following url: . However, when the flash is loaded, the dimensions of the swf file exceed those specified in the html tag. How can this issue be resolved? <div style="display: inline;float:center;"& ...

Exploring the differences between two CSS style attributes using JQuery

Can someone help me with a quick question about CSS? I need to compare two style attributes, specifically margin-left. If the margin-left is less than 500px, I don't want to make any changes. However, if it's greater than 500px, I want to add ano ...

Adjust the width to ensure the height is within the bounds of the window screen?

I am currently in the process of developing a responsive website, and my goal is to have the homepage display without any need for scrolling. The layout consists of a 239px tall header, a footer that is 94px tall, and an Owl Carousel that slides through im ...

What is the best way to insert a hint into an asp:textbox?

Is there a method to insert a hint or placeholder text within an asp:TextBox element? I am looking for a way to have text appear in the textbox that disappears when the user clicks on it. Can this be done using html / css? ...

Tips for getting rid of the excess space surrounding an image within a div tag

Placing images inside bootstrap card divs within col divs is my current challenge <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"& ...

Desktop Safari displays Font-awesome icons with trimmed corners using a border-radius of 50%

While working on incorporating font awesome share icons into my project, I encountered an issue with getting a circle around them. After exploring various approaches, I opted for a CSS solution. Using React FontAwesome posed some challenges that led me to ...

Tips for relocating a CSS button

I have designed two buttons using css and I am looking to align them below the title "forecast customer activity". Due to extensive styling in css, the code might appear lengthy. Requesting assistance with a solution after reviewing the following code snip ...