Using a background image from your own website does not display anything, but using an image from an

It's really strange from where I'm standing.

I'm working on a website and trying to set up a banner with a background image using the background-image property.

The issue I'm facing is: when I use two images with the same dimensions, it doesn't work if I load them from my own domain, but it works perfectly fine from an external domain.

MY DILEMMA:

Here is the banner I have on my page:

https://i.sstatic.net/0Qqo9.png

The background image is set like this:

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

Now, here's the weird part - the image actually displays on this URL, but on my site, instead of the image, I get a black background:

https://i.sstatic.net/68x21.jpg

However, if I use a different image from a third-party URL that has the exact same dimensions:

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

And then replace it in the CSS like so:

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

Everything works perfectly and the background shows up!

So, my question is: What could be causing this strange behavior? I might be losing my mind, but I need your expertise to help me figure out what's going wrong.

htmlcssimage

Answer №1

The overlay effect conceals your background image.

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

Please update the CSS

.overlay::after{
   background: rgba(0,0,0,.5)
}

I trust this information proves to be beneficial for you

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

Type of element returned

Is there a way to retrieve the element type? I'm interested in applying the style of a class to HTML5 elements without using the class attribute. <!DOCTYPE> <html> <head> <title>My page</title> </head& ...

javascriptjquerycsshtml

Tips for adjusting the margin of a print document in a printTask?

Is there a way to achieve a borderless print? Currently, my printed output has a border around it. I would like the image to start at the top left corner without any borders. I attempted to set a negative margin to the print-style box, but it resulted in ...

javascripthtmlprintingwinjswindows-8.1

The background color of the CSS div tag does not cover the entire axis

I'm facing a dilemma in my CSS design that's got me stuck. This issue also seems to be present in this forum: Whenever I zoom in on the page, I noticed that the header background doesn't fully extend across the screen horizontally. Here&apo ...

htmlcss

What could be causing the Custom CSS file to stop functioning properly?

Currently, I am in the process of developing an eCommerce website utilizing PHP, Bootstrap, and JQuery. In order to structure the header file for this project, I have followed the following format: <!DOCTYPE html> <html> <head> ...

phphtmljquerycssbootstrap-5

What could be the reason for the Javascript function failing to run?

I need assistance in executing a function called "send()" which includes an AJAX request. This function is located in ajax.js (included in the code snippet) The Ajax success updates the src attribute of my image. The function seems to be working correctly ...

javascriptjqueryhtmlnode.jsajax

Tips on updating an HTML page following the receipt of a CURL request by a PHP script

I am currently developing a unique login system with customized requirements. The HTML form will submit data to a PHP script using AJAX, which will then forward the information to another PHP script for processing through CURL. After some time has passed ...

javascriptphphtmlajaxcurl

A step-by-step guide on using Jquery to fade out a single button

My array of options is laid out in a row of buttons: <div class="console_row1"> <button class="button">TOFU</button> <button class="button">BEANS</button> <button class="button">RIC ...

javascriptjqueryhtmlcssfadeout

Tips for keeping a div element at the top of the page

I am looking to have a div stick to the top of the page when someone scrolls down When the page is scrolled, the green div with class stickdiv should automatically stick to the top var left = document.getElementsByClassName("stickdiv"); for( var i = 0; ...

javascripthtmlcss

The table dynamically adjusts based on the JSON data

My goal is to design a table that displays a JSON-object with multiple levels. The challenge is to showcase all the data in one row, even when it shows as [object object] like the Id in the plnkr example. ResultData=[ { "First_name": "xx", ...

htmljsonangular

The use of CSS float creates spaces between elements

Is there a way to stack the green DIVs on top of each other without any space between them in the given simple HTML code? I'm puzzled by the gap between the third and fourth green DIVs. * { margin: 0; } .left { width: 20%; background-color: # ...

htmlcss

Determine the location of an image with the help of Jquery

I'm currently working on finding the position of an image with Jquery. The issue I am facing is that it only provides me with the initial position of the image when the document was loaded. $(".frog").click(function(){ alert($(".frog").position() ...

javascriptjqueryhtmlimage

Can I combine the col and d-flex classes in Bootstrap 5 without breaking any rules?

Is it possible to use both col and d-flex classes together? I want to center the element with the class "description" by combining them. <section class="container-fluid mb-5"> <div class="row"> <div class=&q ...

cssflexboxbootstrap-5

animation for closing the hamburger menu

Having trouble creating a hamburger menu animation. I've set up two divs - one for the basic horizontal lines and one for the X icon. Using jQuery, I can hide and show them (clicking on the lines hides them and shows the X). But now I want to animate ...

cssanimationmenu

Generate a fresh row in a table with user inputs and save the input values when the "save" button is

HTML: <tbody> <tr id="hiddenRow"> <td> <button id="saveBtn" class="btn btn-success btn-xs">save</button> </td> <td id="firstName"> <input id="first" type="tex ...

javascriptjqueryhtml

Exploring the functionalities of jQuery and Local Storage: Understanding the Selector's various states

I am currently developing a new feature for font customization on a website. The drop-down menu offers several font options to choose from. When a user clicks on one of these options, the following code is executed: jQuery(function($) { if (localStorage.g ...

jquerycssfontslocal-storageprop

additional dark border streak

When you resize the browser window, you will notice a different layout for iPhone. I am seeing an additional black line below the slider and I'm unsure how to remove it. I have already tried removing the border property but the black line remains. Bel ...

htmlcssmedia-queries

Extracting the value of *data* from my HTML and displaying it in the console with Javascript

I'm struggling to figure out what's going wrong with this code. I've done some research online and it seems like I should just include the window.onload = function() at the beginning of my code. However, no matter what I try, the value alway ...

javascripthtmlcss

"Utilizing Bootstrap to position the right column at the top on a mobile platform

I am in need of assistance with getting the correct div to display on top when viewed on a mobile device using Bootstrap. The issue is discussed and resolved in this particular discussion. To clarify, I would like my desktop layout to appear as follows: A ...

htmlcsstwitter-bootstrap

Align the image in the center of the page horizontally

Is there a reason why aligning an arbitrary image horizontally is so challenging (or as one response mentioned, "It is not possible.")? I previously had centered images that were functioning correctly for years; however, suddenly they stubbornly position t ...

htmlcssimagecentering

Transform picture into CAD format (DWG or DXF)

I am struggling with a .NET C# program that requires converting images (such as BMP, JPEG, PNG) into AutoCAD files (DWG or DXF). Despite trying various methods suggested across different forums, I have not been successful. I attempted using Aspose, but dis ...

.netimageasposedwg