I am experiencing issues with the visibility of my background on certain mobile browsers

Apologies for repeating a similar question, but I've already tried the solutions mentioned in other posts. On my webpage, I have a table with a background image set using CSS.

html
{
width:100%
height: 100%;
margin: 0px;
padding: 0px;
border: none;
}

table.homemain
{       
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url('../images/home-bg.jpg') no-repeat;
background-position: 50% 50%;
background-size: cover;
height: 100%;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

<table class="homemain">

I've resized the image from 90k to 9k, but it hasn't made a difference. I've simplified the CSS to only include the background image like this:

background-image:url(../images/home-bg.jpg);

But the image still doesn't display. Unfortunately, I can't provide a live link as the site is hosted locally on my PC.

Any advice would be greatly appreciated.

Thanks,

John

Answer №1

If you want to display a background image for the entire page, you can place it within a <style> </style> element like this:

<style>
  body {
    background-image: url("~/images/home-bg.jpg");
  } 
</style>

Be sure to include the full directory path to avoid any confusion.

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

Image upload failed after a successful submission using an HTML form

My PHP website is custom-built and hosted on a Plesk (Windows Hosting Server of Godaddy) After submitting a form, all values are updated except for the image. The error message displayed on the page is as follows: PHP Warning: move_uploaded_file(../../.. ...

css webpack react component not displaying background images

I'm facing an issue where I can't seem to get the image to display as a background. If I just attach the image directly, it shows up without any problems. However, my intention is to make it a background image so that I can overlay text on top of ...

What can I do to enhance the responsiveness of this rotating cube?

Here I am working with a rotating cube on the web. Check out my similar code. I am attempting to make it so that when the browser size is reduced, the table and cube also shrink in size accordingly without changing their position relative to each other. I ...

Issues with JavaScript causing slideshow to malfunction

I'm experiencing some issues with my image slider. It seems that during the initial loop, the slideshow keeps reverting back to 'image3'. However, after the first loop, everything appears to work correctly. I am looking for a solution to ens ...

How can I activate a disabled option number 2 after selecting option number 1?

I have encountered an issue with my JavaScript code. The second "select" element is supposed to be disabled by default, but I want it to become enabled when an option is selected from the first "select". However, this functionality is not working as expect ...

Achieving a responsive card layout in Reactjs with Bootstrap by displaying four cards in a single row

const DisplayCategory = () => { const history = useHistory(); useEffect(() => { axios.get('http://localhost:8080/products', { headers: { Authorization: "Bearer " + localStorage.getItem("token&q ...

Populate a div using an HTML file with the help of AJAX

In my main HTML file, there is a div element: <div id="content"></div> Additionally, I have two other HTML files: login.html and signup.html. Furthermore, there is a navigation bar located at the top of the page. I am curious to know if it i ...

Creating a SVG polygon using an array of points in JavaScript

Consider the following array containing points: arr = [ [ 0,0 ], [ 50,50 ], [ 25,25 ], ]; I would like to create an SVG polygon using this array. Initially, I thought the code below would work, but it doesn't: <polygo ...

Responsive Font Sizing in React Native

Does React Native automatically adjust font size based on screen size? If I set the fontSize to 10 for a Text component, will it resize according to different phone sizes? If not, what is the best way to make fonts responsive in React Native? ...

Slow rotation in CSS styling

.badge { -webkit-transform-style: preserve-3d; -webkit-perspective: 1000; position: relative; } .back, .front { position: absolute; -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform 1s ease-in; width: ...

What is the best way to invert the positioning of the li elements to move upwards?

https://i.stack.imgur.com/mZaoS.png Seeking assistance on adjusting the height of bars to start from the bottom and go upwards instead of starting from the top position and going downwards. The JavaScript code below is used to generate the li elements and ...

Automatic Email Reply that Automatically populates the recipient field with the sender's information

I'm curious to know if it's possible to create a mailto link that automatically populates the TO: field with the email of the original sender, without including the email address in the link itself. For instance: "a href="mailto:ORIGINALSENDER? ...

What is the best way to display breadcrumb text on a new line within a pop up when the width exceeds without resorting to a scroll bar

Presently, my breadcrumb has a scrollable wrap with text overflow I want to make the overflowed text continue on the next line. How can I achieve this? The CSS code I am using for the image attached is as follows: .breadcrumb-css { text-overflow: ellip ...

Having trouble with React image rendering using webpack?

Struggling to display an image in my React Web App, I encountered a broken image despite the correct file path appearing in the console log. We're utilizing url-loader and file-loader with webpack, importing the file path directly as necessary. Attemp ...

How come an element retrieved with getElementById in Next.js comes back as null despite the presence of a defined document?

Having trouble using SSR in my React/Next app. Despite having the document present (and being able to visually see the div with the id plTable), the getElementById function is returning null. I even tried calling getElementById after 6 seconds to ensure ...

Specify the database to be created using the select option tag

When utilizing the html form action attribute = "uploadone.php", a form is created with an option element value attribute = 'Red'. This method is used to create multiple databases in this manner. However, adding parameters to the URL becomes cumb ...

Issue with window.localStorage.setItem not functioning properly on mobile devices

Currently, I am developing an HTML5 mobile application with jQuery Mobile. Below is a snippet of my code: $(document).on("click","#send_mobile_number",function(){ var mobile = $('#mobile_number').val(); var user_id = sessionStorage.get ...

I am struggling to get the images aligned properly on my HTML page. Can someone please advise on how to fix this issue?

On my HTML page, I have 2 div fields. Within each field, there are 5 images listed sideways. The issue is that the images in the div below are not lining up properly side by side. Given my limited frontend knowledge, how can I align them correctly? Here&a ...

List of dropdown options retrieved from SQLite database

I am attempting to retrieve data from an SQLite database table in order to populate a dropdown menu list. My thought process is outlined below. The main issue I am facing is how to integrate the JS function with the HTML section. HTML.html <label ...

Customizing Material UI: Adjusting the visibility of slider thumb upon user interaction and value changes in the slider

In my application, I have implemented a Material UI Slider and I am looking to keep the thumb invisible until the user interacts with it. Once the user changes the slider value, I want the thumb to remain visible at that specific value. By using the CSS pr ...