Customizing the appearance of a local image with inline CSS using the style attribute and background-image:url

I'm having trouble loading the image Hormiga.jpg as a background for my slideshow using inline style. The url attribute doesn't seem to be applied correctly.

Here is the original code where an image is loaded successfully:

<div class="parallax-bg" style="background-image:url(./images/nature-1.jpg)" data-swiper- 
      parallax="-23%"></div>

The above code is not mine. I have the following file paths:

  • myapp/templates/myapp/index.html
  • myapp/static/images/Hormiga.jpg

In index.html, the images are called correctly like this, but the css inline style is not working:

"{% static 'images/Hormiga.jpg' %}"

The following attempts are not successful:

style="background-image:url"({% static 'images/Hormiga.jpg' %})""
style="background-image:url("{% static 'images/Hormiga.jpg' %}")"
style="background-image:url"(../images/Hormiga.jpg)""
style="background-image:url(images/Hormiga.jpg)"
style="background-image:url(../myapp/static/images/Hormiga.jpg)"

Any assistance would be greatly appreciated. The root is static/images/Hormiga.jpg

Thank you

htmlcsswebfrontendinline-styles

Answer №1

I am not familiar with the static line in your code, and it seems like you have unnecessary quotes.

If the image folder is located in the same directory, use this:

style="background-image:url('./images/Hormiga.jpg')"

Otherwise, if the folder is in the directory above, use this:

style="background-image:url('../images/Hormiga.jpg')"

Answer №2

Hey there, after reviewing your query it seems like the code is correct. However, remember to specify both the width and height for it to display properly.

<div class="parallax-bg" style="background-image:url(./images/nature-1.jpg); width: 100px; height: 100px;" data-swiper- 
      parallax="-23%"></div>

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

The checkbox labeled "Shipping Same as Billing" is not functioning correctly. I have included my JavaScript code below, can someone please help me identify what I am overlooking? (Only JavaScript code is provided; HTML is

I'm having trouble transferring data from a 'shipping' address to the 'billing' address section. I've included all my code, but nothing seems to copy over when the check box useShip is selected. All the HTML code is provided f ...

javascripthtml

How can I effectively display the city weather information that I have chosen from the drop-down menu?

Is there a way to display city weather information that I have selected from a drop-down menu using JSON? I am able to retrieve the city using jQuery, but I am not sure how to load the weather data for that city. Any guidance on this would be appreciated ...

htmlcssjsonapi

What is causing the continuous appearance of null in the console log?

As part of my JavaScript code, I am creating an input element that will be inserted into a div with the id "scripts" in the HTML. Initially, I add a value to this input field using JavaScript, and later I try to retrieve this value in another JavaScript fu ...

javascriptjqueryhtmljsonfunction

Tips for retrieving all values included in the <tr> tags within an html <table>

When the checkbox in the fourth column is clicked, I would like to retrieve all values of td. Additionally, I want to determine the smallest value between ID and Optional ID. <table><form method='GET'> <tr> <th>Name</t ...

javascriptphpjqueryhtml

When I click on my div, the color does not change as expected

Recently, I wrote a code snippet where there are 9 different div elements each assigned a ".spaces" class. The intention was to change the color of these divs upon clicking on them. However, I encountered an issue where only the first div changes its color ...

javascripthtmldomdom-events

Styling elements with CSS when the cursor hovers over them

I have a unique design challenge where I have stacked elements - an image, text, and an icon. My goal is to make only the icon animate when any of these elements are hovered over. <style> .hvr-forward { display: inline-block; vertical-align: mi ...

csshover

Instructions for developing an offset plugin for an HTML5 video player

I'm currently working on developing an offset plugin that allows playing a specific portion of a video in an HTML5 video player. While there is an existing plugin for video.js available at videojs-offset plugin, I am now experimenting to adapt this p ...

javascriptjqueryhtmlvideo

What is the best way to create a placeholder for a select option with a looping value?

I have successfully implemented loops for the select options, but I needed to add a placeholder. In other words, I wanted the first value of the select options to be a placeholder, followed by the values generated from the loop. Here is the code that I u ...

javascriptjqueryloopsweb

When writing CSS, ensure there is no space between selectors and classes of elements

Can you explain the distinction between using a css selector (like p) and assigning a class to an element (.cat)? p.cat{ } Vs. p .cat{ } Appreciate your help! ...

csscss-selectors

Tips for submitting multiple radio button values in a tabular format

HTML Code: <div class="tab"><h4>Zip Code</h4> <p><input type="text" class="text1" placeholder="Enter zip code..." oninput="this.className = ''" name="zipcode"></p> </div> <div class="tab">& ...

javascriptphpjqueryhtmlcss

Switch up the display of table rows with a convenient Toggle Button located right after the

Looking for a way to toggle the visibility of certain rows in an HTML table using a button but having trouble placing the button after the table instead of before. Any suggestions on how to customize this setup? Thanks! /*Use CSS to hide the rows of t ...

htmlcsshtml-table

Can HTML be rendered within classes?

In the admin section of a website, I am working with multiple CRUD tables that require displaying success, information, or error messages when certain actions are performed, like deleting a record. This is a common practice that involves wrapping messages ...

phphtmlclass

iOS 7.0.x causing issues with the height of tabs being trimmed

Struggling to fix a nightmare of an issue with my app, so I'm reaching out for some help. Everything is working fine on Android and iOS versions 7.1.x, 8, and 9. However, when installed on iOS 7.0.4, the bottom tabs are getting cut off. See below: O ...

ioscssiphoneios7ionic-framework

"Adjusting the width of columns in a Datatable

I have arranged a data table with multiple rows and columns, and I am seeking guidance on how to increase the width of the "Tel. 1, Tel. 2, and Fecha" columns to ensure that the text appears on a single line. I've attempted adjusting the s width and t ...

javascripthtmlcssdatatables

Alter Text Using Typewriter

Recently, I have been experimenting with code on my glitch website, trying to create typewriter text. Thanks to help from a user on StackOverflow, I was able to achieve this effect successfully. However, I am now facing a new challenge. My goal is to make ...

javascripthtml

Retrieve information from a JSON API on one server and showcase it on an HTML page hosted on a different server

I have a situation where I need to transfer data from one project (Project1) to another project (Project2). To achieve this, I decided to convert the Project1 data stored in a database into a JSON API and then call it using an HTML page from Project2. Howe ...

javascriptjqueryhtmljson

Prevent scrolling on Bootstrap columns

My webpage is built with Bootstrap and I have a layout with 4 columns on the left and 6 on the right. I want to prevent the 4 columns on the left from scrolling. How can I achieve this? I am aware of the option to use class="affix" on the left column, b ...

htmlcsstwitter-bootstrap

AngularJS Error: The method serviceName.functionName() is not a valid function

I am trying to implement a function that will go back when the cancel button is clicked. Here is the view code: <div ng-controller="goodCtrl"> <button class="btn" ng-click="cancel()">Cancel</button> </div> And here is the Jav ...

javascripthtmlangularjsmodel-view-controller

Explore our array of images displayed in an interactive gallery featuring clickable

I have a query I'm facing an issue with my code. Currently, I have a gallery that displays images perfectly. Now, I want to enhance it by showing a larger resolution of the image when clicked. However, when I add the href tag to link the images, they ...

javascriptphpjqueryhtml

Building custom elements through static compilation

I enjoy using custom elements to efficiently organize the content on a webpage, focusing on semantics rather than getting caught up in the technical details. It seems that in order to utilize custom elements, I have to either depend on JavaScript or use m ...

html