CSS background images struggle to display properly in Safari, often not appearing even when checked in the debugger

I'm currently working on a website that I want to make responsive. I have set up a div ID that is supposed to appear once the width of a mobile device reaches a certain point. Here is the CSS code:

#mobilenavbuttons1 {
max-width: 750px;
padding-top: 20%;
height:0;
background: url("../../../images/productcatalog.jpg") repeat-x 0 0 / 100% auto rgba(0, 0, 0, 0);
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size:cover;  
padding-bottom:3px;
margin-bottom:4px;
text-align: center;
color: #fff;
}

This button displays correctly in all browsers except for Safari. When I open the site in Safari, the area where the button should be is empty. I tried using the debug tool in Safari, but I couldn't see the image background being loaded when I checked the styles section.

I've searched through numerous articles and Stackoverflow posts looking for a solution, but nothing has worked so far. I experimented with different image formats (png, gif), tried using quotes around the image path, removing the quotes, separating the background size property into another line, but none of these attempts have fixed the issue. Any suggestions or thoughts on how to resolve this problem?

csssafaribackground-imagebackground-color

Answer №1

Found the solution, I believe it is related to the backslash/format in which I structured it on a single line. This seems to work:

#mobilenavbuttons1 {
display: none;
max-width: 600px;
padding-top: 15%;
height:0;
background: url("../../../images/productgallery.jpg") rgba(255, 255, 255, 0);
background-size: cover;
background-repeat: no-repeat;
padding-bottom:8px;
margin-bottom:6px;
text-align: center;
color: #000;
}

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

What is the best way to ensure consistent Box Overlay Height across multiple boxes?

Is there a way to ensure that overlay box height remains the same even if the text lines are not the same length? Below is a snippet of my code. If you have a solution using jQuery or JS, please provide it. Thank you for your time and effort in trying to h ...

jqueryhtmlcss

Hovering over the Star Rating component will cause all previous stars to be filled

I'm in the process of creating a Star Rating component for our website using Angular 11. I've managed to render the 5 stars based on the current rating value, but I'm having trouble getting the hover styling just right. Basically, if I have ...

htmlcssangular

Hiding a div by setting its display property to none using a button press

I have been having difficulty finding a solution to my problem despite trying multiple topics. My English skills are not the best, but I hope to explain my issue as clearly as possible. After clicking on this div, I would like to block the display and sho ...

javascriptphpjquerycss

Material UI AppBar fixed position that is not part of a grid container

Hey everyone, I'm really struggling with this issue. I recently set my AppBar to have a position of "fixed". However, now the appbar is no longer contained within its container and instead spans the entire screen. I've been trying to figure it ou ...

cssreactjsmaterial-ui

Challenging glitch in the JavaScript code

My jQuery code seems to be functioning properly in online text editors like Fiddle and StackOverflow snippets. However, when I try to implement the same code in Brackets or view it on GitHub, the navbar scroll down animation fails to work as expected. You ...

javascripthtmlcss

Elements with inline-block display not aligning horizontally next to each other

I am puzzled as to why the two sections, section.structure and section.specificity, are not aligning properly. It seems that when I reduce the width, they line up correctly at a certain point which I haven't identified yet. My goal is to have the wid ...

htmlcss

Step-by-step guide on achieving 100% height for a child element within a parent using Flexbox

Currently facing an issue where trying to make a child element take up 100% of the remaining height of its parent container causes the child's height to go beyond the boundaries of the parent. HTML .container { height: 340px; /* background-i ...

htmlcssflexbox

Is there a way to establish a universal font for all apps within ant design?

I am currently working with NextJS version 14 and I have the following setup: In my globals.css file, I have imported a Google font like so: @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800& ...

cssnext.jsantd

The MIME type 'text/html' is incompatible with stylesheet MIME type and is not supported

I have exhausted all possible solutions for the issue, from specifying the type for <link rel="stylesheet" href="./style.css" /> to using app.use(express.static('public')), but unfortunately, none of them seem to resolve the problem. index ...

javascriptcssreactjswebpackmime-types

Highlight react-bootstrap NavItems with a underline on scroll in React

I am currently working on a website where I have implemented a react-bootstrap navbar with several Nav items. My goal is to enable smooth scrolling through the page, where each section corresponds to an underlined NavItem in the navbar or when clicked, aut ...

javascriptcssreactjsreact-bootstrap

Error in Layout of Navigation Panel and Tabbed Pages

Working on a school project, I encountered a challenge. I found two useful solutions from the W3 website - a sticky navigation bar and the ability to include tabs on a single page for a cleaner presentation of information. However, when trying to implement ...

javascripthtmlcssformattinguinavigationbar

Using different browsers can cause web fonts to appear rough and pixelated

While exploring the issue of "jagged" or "pixelated" fonts, I made an interesting discovery. After creating a website locally and viewing it in Firefox, the font from Google Webfonts appeared flawless - almost like it was straight out of Photoshop. It wasn ...

cssfirefoxfontsfont-face

Close button located in the upper-right corner is partially cut off

My challenge involves placing a close button on the top right corner of a #main div that contains an image of varying or larger size. I need the close button to slightly protrude outside the div using negative margins. The issue is that when I use overflow ...

htmlcss

React Images: Carousel display issue with images not centered

Is there a way to center the selected image instead of it appearing on the left-hand side? Here is the current behavior: https://i.stack.imgur.com/SUWOK.jpg I am using the following packages in a sandbox environment with Next.js 11 and TailwindCSS 2.2.4: ...

cssnext.js

Update the less mixin

I attempted to eliminate the border radius from all Bootstrap elements by creating a custom-mixins.less file with the following lines in it. My intention was for these lines to overwrite the original .border-radius mixin, but unfortunately, it did not work ...

csslessmixins

I envision my home page being divided into two visually stunning full-screen sections, each taking up the entire height of the page

I am currently working with the code shown below. It successfully displays the first part in full height, regardless of resolution, but once I scroll to the second half, there is a large empty gap. How can I eliminate this gap and make the transition smoot ...

htmlcssviewport-units

What causes my absolutely positioned element to disappear when using overflow-x: hidden?

I've been experimenting with the CSS property overflow-x: hidden on a container and noticed that it causes my element with position: absolute to disappear. To see this effect in action, check out this demo: https://codepen.io/Karina1703/pen/LYMzqEj ...

javascripthtmlcss

Error message: Unhandled error - $(...).sidr does not exist as a function. [Chrome developer console]

I included this code in the basic module HTML block of a WordPress page builder and encountered the white screen of death. According to the Chrome developer console, the following error occurred: helpers.js?ver=4.5.3:15 Uncaught TypeError: $(...).sidr is ...

javascriptjqueryhtmlcsswordpress

What is the best way to close a popup window?

Is there a way to close my popup? function hidePopup(){ document.getElementById("popup-1").classList.remove("active"); } @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); .popup .overlay{ positio ...

javascripthtmlcss

Issues with Media Query in Mobile Device Footer not Resolving

Despite searching through numerous pages on Stack, I have not been able to find a solution. I am attempting to remove the footer on mobile devices using a media query. Unfortunately, it does not seem to be effective on the device, although it works when th ...

phpcssmedia-queries