URL for CSS Background-Image

While working on CSS styling for the body, I ran into a problem and was curious to understand the distinction.

Initially, I tried this

 body {
 background-image: url('img/bg.png');
 }

However, it did not produce the desired result. http://www.w3schools.com/cssref/pr_background-image.asp

Then, I attempted the following:

 body {
 background-image: url('../img/bg.png');
 }

Surprisingly, this worked perfectly. My assumption is that due to the file being in a folder, the '../' had to be used. Just wanted to confirm this with others before proceeding further.

Answer №1

A typical project structure usually appears like this:

index.html
css/
    style.css
img/
    bg.png

When you specify

background-image: url('img/bg.png');

it means the image is located at css/img/bg.png, and when you use

background-image: url('../img/bg.png');

that indicates the image is at img/bg.png (../ - one level up from current folder, ../../ two levels up, and so on)

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

Clicking on tabs causes their content to mysteriously vanish

I am working on creating a dynamic menu using jQuery that switches content based on tabs. However, I am facing an issue where clicking on a different <li> item causes the content to disappear. Each list item should correspond to different content sec ...

Hiding a Blogger section when its widget is not visible

Take a look at this code: <b:section id='page-list'> <b:widget id='PageList1' locked='false' type='PageList' version='2' visible='true'> </b:widget> </b:section> I wa ...

Only apply prevent default on specific levels for better control

I am currently working on a menu with submenus. I am facing an issue where when I click on a top-level menu item, I need to use prevent default because they are anchor tags. However, for the submenu items, I do not want to prevent default behavior. I am st ...

Exploring HTML5 video playback in AngularJS

When I use this code: <video id="video" class="video-js vjs-default-skin" controls width="640" height="264"> <source src="http://localhost:3000/files/public/photos/Let-her-go.mp4" type='video/mp4' /> <p class="v ...

Top Method for Reloading Element-Specific JavaScript When Replacing Elements

Is there a better way to re-initialize JavaScript without needing a page refresh? I'm currently struggling with appending an MDBootstrap <select> tag, which involves more than just adding a child element. Instead, I have to remove the element an ...

What is the default margin for Autocomplete in Material UI?

Having just started with material-ui, I'm having trouble figuring out the margins of the Autocomplete. My form includes both Autocomplete and TextInput elements, but their positioning seems off to me. Is there some predefined margin box around Autocom ...

Packages have gone astray post node_modules scrub

I encountered an issue with npm run watch getting stuck at 10%, so I took the step of deleting the node_modules directory and package-lock.json. However, it seems that I may have installed modules using npm install without the --save-dev option. Even after ...

How to position preloader at the center in materializeCSS

Given this situation: I attempted to implement this Preloader with position:fixed and centered. My approach was as follows: .loader { position:fixed; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); } <link rel="stylesheet" href="h ...

Comparison of Timeouts in HTML Forms: POST vs GET

I created a basic HTML form with a text box and a submit button that redirects to the same page and displays the input text. It came to my attention that when I use the POST method to send the input text data, it only functions properly if the page has be ...

Styling the background of a container in CSS using Bootstrap

Currently, I am utilizing bootstrap and trying to find an elegant solution for adding a background to my container. Specifically, I am working with the bootstrap class container, as opposed to container-fluid. The official Bootstrap documentation advises ...

Creative ways to position and underline text using CSS

I'm having difficulty with positioning the text and extending the underline to the edge of the screen in order to create a specific visual effect. .header { height: 550px; width: 100%; background-color: #1F2041; position: relative; } . ...

Issue with data binding in file upload field

I am currently working on a project using Asp.Net Core MVC. In the model, there is a property called IFormFile. While using a basic input tag, everything works perfectly fine. However, when I tried to implement the file input plugin from this URL, the mode ...

CakePHP allows developers to easily include images in their links using the `$this->Html->link` method. However, instead of generating HTML code for the image, it outputs ASCII characters

I can't seem to find the solution in the CakePHP 2.3.0 manual. I am trying to use $this->Html->link with $this->Html->image to create a clickable image. However, I'm encountering an issue where the ASCII rendering of quotes is being g ...

Utilizing HTML and jQuery to load a dynamic URL within a div placeholder

I'm experiencing some difficulty with loading a custom URL. Essentially, the user will click on a series of navigation links that will dynamically load the relevant content in a tabbed bootstrap jumbotron. The navigation links vary based on data store ...

Saving HTML content into a MySQL database using Python

I have the task of storing locally stored crawled HTML pages. I successfully open the file using myHTML = open(file_location,'r').read() output can be found here: I am able to create the SQL query successfully: query_insert = ("insert into jo ...

Using classes to override CSS

I've been going through the Material UI Overrides documentation in an attempt to customize the color of each radio button, but I'm having trouble grasping it conceptually. If I start with Material UI's default setup for radio buttons, how ca ...

The data-toggle function is not functioning properly with the code provided

Could someone shed some light on why my tabs and navigation bar dropdown button are not functioning properly? <div class="col-12"> <h2>Corporate Leadership</h2> <ul class = "nav nav-tabs&q ...

The height set to 100% is causing issues with the padding-bottom property

Currently, I have a setup that includes: A div with width set to 100% and height set to 100% An SVG element inside the div with default width and height of 100% My issue is that when applying padding to the div, the left, right, and top padding seem to w ...

Getting rid of the Horizontal Scroll Bar

Having trouble with a persistent horizontal scrollbar in the "section3__container" container despite attempts to adjust size and overflow settings. Need assistance in removing this unwanted feature. <html lang="en"> <head> <m ...

Utilizing jQuery for displaying or hiding list elements

To view all the code, click on this link: http://jsfiddle.net/yrgK8/ A section titled "news" is included in the code snippet below: <ul id="news"> <li><p>asfdsadfdsafdsafdsafdsafdsafdsafdsa</p></li> <li>&l ...