The issue of a background image not appearing on Chrome and Firefox has been identified

I am experiencing an issue where a background image is not showing up on Chrome or Firefox, but it displays properly on other browsers.

  • The problem occurs with relative and hard links
  • Substituting the image file works, but the video disappears
  • Adblock is not the cause of the problem

This problem is happening on an Apache shared server/shared hosting environment.

The expected outcome is to have a background video playing at the top of the page. Although the background video works fine on the main landing page, it does not display on the section page... which is set up in .css (similar to the full-screen video background CSS method).

 <header id="header">
  <div class="intro">
    <div class="container">
      <div class="row">
        <div class="intro-text">
            <h1><span class="name">TEXT</span></h1>
            <h2><span class="someClass"><span>Design &#38; TEXT</span></h2>
            <p><a title="TEXT" href="TEXT" class="btn btn-default btn-lg page-scroll" class="class2"><i class="fa fa-level-down" aria-hidden="true"></i></a>
            <a title="TEXT" href="TEXT" class="btn btn-default btn-lg page-scroll" class="class22"> <i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
            <a title="Send email" href="mailto:TEXT?subject=EMAIL ADDRESS NEEDS EDITING&body=Please remove the text 'NOTSPAM' from the address before sending your email." class="btn btn-default btn-lg page-scroll" class="class22"> <i class="fa fa-envelope" aria-hidden="true"></i></a></p>
          </div>
      </div>
    </div>
  </div>
</header>
htmlcss

Answer №1

You mentioned that the background image isn't displaying, and then you noted that the background video isn't playing either. It appears that you are attempting to incorporate an mp4 file in your CSS background attribute - it's important to note that this won't function as expected. The background property (or specifically the background-image shorthand) does not have the capability to support videos.

Answer №2

To create a video background, you can layer two elements by adjusting their index, position, and opacity properties. The first element will be the video itself, with another element placed on top of it with reduced opacity. Check out this W3schools tutorial for guidance: https://www.w3schools.com/howto/howto_css_fullscreen_video.asp

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

New feature: Material UI Chip Input with floating input label

I installed material-ui-chip-input to implement tags in an input field. I wanted a label alongside it, so I utilized the default Material UI label for consistency with other inputs. However, the input doesn't shrink as expected when clicked on by the ...

cssreactjsmaterial-uifrontendlabel

Tips for combining a linear-gradient and background-image on a single element:

Is it possible to apply a linear-gradient color along with a background-image on the same div element in HTML? I've been trying to achieve this but haven't been successful so far. Any suggestions would be greatly appreciated. Below is the snippe ...

htmlcssbackground-imagelinear-gradients

Encountered a glitch during the npm installation process for mui core

I recently set up a new create-react-app and am still encountering the same error message. After installing MUI, I'm getting an 'unable to resolve dependency tree' issue. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve depende ...

htmlreactjsmaterial-ui

Creating a photo grid with consistent order is simple using flexbox

I'm currently working on an image grid that consists of 2 rows laid out horizontally. Initially, the first row contains 4 images while the second row has 2 images. Users should have the ability to add more images to the second row. The issue I am faci ...

htmlcsssassflexbox

Adjust the PHP variable's value when loading content via AJAX

Seeking assistance after attempting to create a PHP template within the Foundation 4 framework without clear guidance. The framework is quite basic, so I used jQuery to incorporate page transitions by making an AJAX call to retrieve "content" from another ...

phpjqueryhtmlajax

Navigate to the adjacent IDs

I have multiple sections with varying content and links (previous and next) to navigate to the next section. Initially, everything functions properly. However, when adding a new section in between existing ones, I am required to update all the ids to ensu ...

javascriptjqueryhtml

Regular expressions can be used to extract specific attributes and inner content from a div element within a contentEditable container

Context I am currently developing a tagging system called @Name for my website. Successfully, I have managed to detect names upon keystroke and replace the content with the corresponding div class='tag' data-id='User-id'>Name</di ...

javascriptjqueryregexhtml

Construct a table featuring nested rows for every parent entry

Table 1 orderid customerName totalCost ---------------------------------- 1 Jonh £200.00 2 Ringo £50 Table 2 orderlineid orderid productName productPrice Quantity ----------------------------------------------- ...

javascriptjqueryhtml

Conceal the div element when located beneath an ordered list with a designated

I need help hiding the display of comment information if it is a child comment. Below is my attempt to hide the div with the id "info" if the "ol" element has a class of "children". If you have another method for hiding the div when the comment is a chil ...

javascriptjqueryhtmlcsswordpress

Using Selenium to locate and click on a hyperlink within a table by identifying it with its displayed name

In my case, I have a table that displays records of school districts. My goal is to use Selenium in order to select the delete icon positioned in the eighth td for the district located on a row with a specific name. In this scenario, the name being QA__run ...

cssxpathselenium

What sets apart the "+" and "~" selectors in CSS?

I've tried using both of these selectors, but I'm having trouble distinguishing between them. It appears that they are functioning in the same way. There must be a difference that I'm overlooking. ...

css

What is the best way to make a CSS change triggered by a onScroll() event stay in place permanently?

I need a div element to be displayed as a "scroll back to top" button on my webpage when the user has scrolled past a certain point. To achieve this, I am using the JavaScript code provided below: $(document).ready(function() { $(window).scroll(functio ...

jquerycsseventsonscroll

Having trouble with inserting data into MySQL database using PHP?

I am currently facing an issue while attempting to insert data into a MySQL database. Although no errors are appearing during the process, when I try to browse the data, it doesn't seem to be getting inserted into the database. Below is my code, could ...

phphtmldatabaseinsert

Transitioning from clip to clip-path in order to utilize percentage values

My current approach involves using a scss-based animation to create border animations with movement. The animation's core functionality relies on the use of clip. $box-width: 80px; $box-height: 50px; @keyframes clipMe { 0%, 100% { ...

csssasscss-animationsclip-path

Adjusting the "width" of a widgets within a particular <td> element on WordPress

Recently, I was given the task of modifying a mortgage calculator widget on a WordPress site to enlarge its appearance. Specifically, I am attempting to adjust the #MLCalcFormLoanForm table tbody tr td where one of the individual tags is set with a width ...

htmlcsswordpress

Utilizing a function argument within the :not() selector

I am currently working towards the objective of selecting all elements in my document except for those within a specific class. This is what I have come up with so far: var x = document.querySelectorAll(":not(.myParameter)"); My aim is to make 'myPa ...

javascripthtml

Create an interactive HTML5 drag-and-drop interface that restricts the dropping of nested elements to only within form fields. This functionality is achieved

I have implemented Sortable.JS in a form builder to enable drag and drop functionality. My goal is to allow users to drag sections (which is mostly working) and questions within those sections, either within the same section or into other sections. The is ...

javascripthtmldrag-and-dropsortablejs

When the condition is false, Angular 8's ngIf creates an empty element

Encountering an issue with Angular8 and ngIf: I have a piece of code that generates a div element loading images and their associated details onto a webpage from a JSON file based on a condition: HTML Code: <div class="row" > < ...

htmlangularangular-ng-if

Utilize the Static Path in Django with Template Filters

To easily version my css file using a simple template variable, I update the version in my settings and it automatically applies to all files. Here's how I accomplish this: Template Filter @register.filter def settings_value(name): return getatt ...

cssdjango

Position a single div on the left-hand side and arrange two divs on the right using display:flex

Is there a way to achieve this layout without adding another div, using only parents and 3 child elements? I had tried using height: max-content, but it didn't work as expected. .container { display: flex; flex-wrap: wrap; } .item { flex-bas ...

htmlcssflexbox