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

htmlcssmobile

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

Adding a Click class can cause significant disruption to the entire CSS layout

I am facing an issue with transforming the X position and appending an additional class to create a slide effect in React. It seems to be working differently compared to using vanilla JavaScript. Below is the code snippet: .inputModal { position: absolut ...

cssreactjsreact-css-modules

Generating a PDF file from an HTML and CSS page can be done without relying on APIs or libraries, by leveraging the

Is there a way to directly convert an HTML page generated using PHP and CSS into a PDF format without the use of libraries? I have come across multiple libraries that can accomplish this task, but I would prefer not to rely on any external libraries and i ...

phphtmlcsspdfheader

How can I show or hide all child elements of a DOM node using JavaScript?

Assume I have a situation where the HTML below is present and I aim to dynamically conceal all the descendants of the 'overlay' div <div id="overlay" class="foo"> <h2 class="title">title</h2> ...

javascripthtmlcss

Any suggestions on how to avoid code repetition using Jquery?

This code allows me to create a menu for my gallery. By setting the .masonry # elements to display:none, I can use the corresponding ID in the menu to show the correct gallery when clicked. However, there is a lot of repetitive code in this implementatio ...

jqueryhtmlrepeat

Press the button to update several span elements

Imagine I have multiple span elements like this: <span>A</span> <span>B</span> <span>C</span> <span>D</span> and a div element (which will be converted to a button later) named "change". <div id="chan ...

javascriptjqueryhtmlcss

What is the best way to update just the image path in the source using jQuery?

I am currently working on implementing a dark mode function for my website, and I have successfully adjusted the divs and other elements. However, I am facing an issue with changing the paths of images. In order to enable dark mode, I have created two sep ...

javascripthtmljquerycss

"Rotated element in Opera does not maintain event functionality when positioned outside its

Make sure to test this example on Opera (version 12.02) by clicking this link. In Opera, try clicking the red box inside the blue box (event is triggered), then click the red box outside the blue box (event isn't triggered). The container must have p ...

cssrotationopera

Achieving a Photo Grid Layout with CSS

Looking for help with my CSS photogrid - it's close to what I want, but not quite there. Here's the layout I'm aiming for: 1 | 2 | 3 4 | 5 | 6 But currently, it displays like this: 1 | 3 | 5 2 | 4 | 6 I've tried tweaking the CSS but ...

htmlcss

Creating a fading effect on an image in relation to another dynamic image

I am currently facing an issue in my code where I am trying to make one image fade in next to another, regardless of the position of the movable image on the screen. The movable image can be controlled using arrow keys, and when I move it across the screen ...

jqueryhtmlcss

How to target the DIV elements that have at least one unordered list (UL) inside using CSS selector or JavaScript

Imagine a hierarchy structured like this: <div class="first_level"> <div class="second_level_1"> <div class="third_level_1"> <div class="fourth_level_1"> <ul><li></li><li></li></ ...

htmlcsscss-selectors

Guide to verifying a value within a JSON object in Ionic 2

Is there a way to check the value of "no_cover" in thumbnail[0] and replace it with asset/sss.jpg in order to display on the listpage? I have attempted to include <img src="{{item.LINKS.thumbnail[0]}}"> in Listpage.html, but it only shows the thumbna ...

javascripthtmltypescriptionic-frameworkionic2

Create a centrally located search bar in the header with a stylish button using Bootstrap 5

Struggling with aligning elements on my simple search page. The goal is to center the company name above the search input and have buttons centered under it with some spacing in between. https://i.stack.imgur.com/FdadF.png <div class="backgroundWh ...

htmlcssbootstrap-5

The CSS3 Transform feature kicks in only after the window is resized in Mozilla Firefox

I have created a pure CSS3 parallax webpage by following the method outlined by Keith Clark and using a sample made by Carl Henderson (I can't provide a direct link to his codepen due to my lack of reputation). You can find the code in the main page, ...

htmlcssgoogle-chromemozillaparallax

Creating lasting placeholder text with gaps between each word

Looking to create a unique text input with static content on the right and editable text on the left https://i.stack.imgur.com/K0YfM.png Any suggestions? ...

htmlcss

Having trouble applying styles to a component using forwardRef

I'm relatively new to React and still trying to wrap my head around the component's lifecycle. However, the issue at hand is proving to be quite perplexing. One thing that confuses me is why adding "setState(10);" causes the style of the "Test" ...

javascripthtmlcssreactjs

How to align text to the bottom of a div using CSS

I am struggling to position the text 'About' at the bottom of an image. The red line marks the spot where I want the text aligned at the bottom. However, every method I try results in inconsistent outcomes when viewed on desktop and mobile device ...

htmlcss

Tips for extracting both the div and entire inner content using JavaScript

I need to retrieve the inner content of a div using JavaScript For example: <div id="content" style="height: 20px; overflow: hidden"> content<br>content<br>content<br> </div> This is my HTML code. I only know the div&apos ...

javascripthtml

Flow bar for micro-tasks

In my current project, I am faced with the task of organizing a series of 4 mini tasks and displaying to the end user which specific mini task they are currently on. To accomplish this, I have been utilizing image tags for each task. <img>1</img ...

javascriptjqueryhtmlcss

The navigation bar on the website highlights vibrant green arrows next to the

I'm having trouble implementing a bootstrap menu on my website using the code provided by Bootstrap. The menu is not displaying correctly and instead showing small green UL arrows. I have JavaScript and Bootstrap scripts in my project. Is there a way ...

htmlcssasp.net-mvctwitter-bootstrap

When using Owl Carousel in Chrome, the carousel unexpectedly stops after switching tabs

Hi there, I'm currently testing out the auto play feature in owl carousel. One issue I've encountered is that when I switch to another tab in Chrome and then return to my webpage with the carousel, it stops functioning unless I manually drag the ...

javascriptjqueryhtmlcssowl-carousel