How to modify the background image of a div using CSS from a specific folder

<head id="Head1" runat="server">
 <title>Title</title>

<style>

  .parallax
   {
    /* The image used */
    background-image: url(Pictures/BackUS.png);


    height: 100%;


    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
  </style>

</head>
<body>
    <form id="form1" runat="server">

  <div class="parallax"></div>

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

"aa" is where the code is located, the picture is in a folder named "Pictuers" as BackUS.png. Everything is located in the "User" directory.

To specify the path for this line:

 background-image: url(Pictures/BackUS.png);

Answer №1

If you have the Pictures Folder located in the same directory as your HTML code, then this solution should work for you. Just remember that the div must be given a specific size to display the background picture effectively. You will need to adjust the size of the div according to the dimensions of the picture.

<body>
    <style type="text/css">
        .parallax {
                /* The image used */
                    background-image: url(Pictures/BackUS.png);


                    height: 100%;


                    /* Create the parallax scrolling effect */
                    background-attachment: fixed;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
        }
    </style>
  <div class="parallax" >Hello</div>
</body>

Answer №2

The quotes around the path are essential.

background-image: url("Pictures/BackUS.png");

Answer №3

Give this a shot,

background-image: url(../Images/BackUS.png);

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

ui-router: Issue with ui-sref causing font color to remain unchanged

I've been trying to customize the font color of a navigation link using ui-router's ui-sref functionality, but I'm facing an issue. While I can change the background color by adding it to the .active class in my CSS, the font color remains u ...

Here is a step-by-step guide on how to use JavaScript to eliminate the page title, URL, date and

When printing a page using window.print, is there a way to exclude the page title, URL, page number, and date/time from appearing? ...

jQuery deduct a value from a given value

i have a full duration that is divided into multiple sections, the user needs to input the duration for each section i would like the system to calculate and display the remaining duration from the full duration, regardless of whether the user fills out ...

What is the best way to align the button correctly beside the cluster of checkboxes within bootstrap framework?

Here is a snippet of HTML code that I am working with: <div class="container"> <form name ="queryForm"> <div class="form-group"> <p class="checkbox-inline"> <input type="checkbox" name="optionsRadios" id="checkOne" ...

I'm wondering why using display flex with justify-content center and align-items center is not properly centering the elements both horizontally and vertically. Can anyone explain this?

As I delve into the world of JavaScript, I find myself coding simple JS, HTML, and CSS snippets to enhance my learning experience. These exercises help me grasp the concepts well enough to create various JS web elements and projects. My goal is to eventual ...

Custom view with spannable text functionality

Can a custom view be included in a spannable text? I've noticed various types of spannable objects in the android.text.style package, but I'm curious if it's possible to insert a custom view. Something like spanable.setSpan(CustomView, .. ...

Error: The function getAuth has not been defined - Firebase

I have included the code snippets from index.html and index.js for reference. The analytics functionality seems to be working fine, but I am facing an issue with authentication due to an error during testing. Thank you for your help. index.html <script ...

The userscript will keep the window open as long as it remains inactive

Hello everyone, I'm excited to join the StackOverflow community and dive into userscripts for the first time! Putting aside any unnecessary details, I'm encountering a small issue with a script I recently created. (function () { $("#enbut"). ...

When utilizing PHP Form Validation alongside Javascript, the validation process does not halt even if a

I have been grappling with creating a basic HTML form validation using Javascript After experimenting with various examples, I am still facing the issue of my index page loading upon clicking the button on the form. Despite including "return false" in wha ...

Styling the tab view in PrimeFaces

I am currently working with the tab view feature in primefaces and I have encountered a couple of issues. 1) When using Internet Explorer, the tabs are displayed vertically instead of horizontally. However, it works fine in Firefox. FireFox : Internet E ...

Unable to activate dropdown menu in html and css

Hi there, I'm facing an issue with hiding the dropdown-menu submenu. I tried using display: block !important;, but it didn't work. Even when I used display: none !important;, the dropdown menu still wouldn't disappear. I want the dropdown s ...

CSS/HTML: Resolving Internet Explorer's Div Positioning Challenges

I've been struggling to find a resolution for this issue but I haven't been able to come up with anything effective. Here's the basic concept of what I'm trying to achieve. My goal is to have my layout divided into 3 divs. The first se ...

Utilizing conditional statements for confirming purchased orders with a pop-up confirmation box

function purchaseClicked() { var orders = prompt("Are you sure you want to buy these Items?"); if (orders != null) { alert('Please try selecting your items again!') } else { alert('Thank you for shopping ...

Eliminate any hyperlink mentions from the Media Print Screen

I'm experiencing a small issue where I am unable to remove the link reference from the print view. Below is the HTML code snippet: <table style="width: 436px; height: 374px;" border="0" cellpadding="5"> <tbody> <tr style=" ...

Exploring intricate binding expressions using IF statements in ASP.NET

I am trying to create an expression for a column in my repeater, but I am not confident about the syntax. My goal is to display "No Document" if the value is equal to "DispForm.aspx", otherwise show the actual value. I attempted to combine all expression ...

Populate an HTML table using a JavaScript array containing objects

Greetings, fellow coders! I am new to the coding world and this community, and despite my efforts in searching for a solution, I couldn't find exactly what I was looking for. So, here is my question: I have an array structured as follows: const arr ...

Issue with maplace.js preventing the display of the Google map

I have followed the setup instructions found at . After loading the maplace.js file on my server, I incorporated the provided code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>minimal maplace</title> < ...

How can we add up the sum with just one click and then display the

Is there a way to calculate numbers within specific DIV boxes and display the total in a separate DIV when a box is clicked? I've attempted different methods, including enclosing the code within the window.onclick function. Check out my code on this J ...

Using a foreach loop to showcase data in a table

My goal is to utilize the GitHub API to showcase all the issues present in my repository in a neat table format on my website. Despite my best efforts, I am facing difficulties in generating the table using a foreach loop. Below is the PHP code I am curr ...

Tips for utilizing dynamic variables when setting props in React Native styles

I am encountering an issue while trying to set props in the stylesheet to dynamically change the background color based on data received from the server. undefined is not an object (evaluating 'this.props.colorCode') Below is the snippet of my ...