Fixing the background transition issue on Safari is a common problem that many users encounter

My background image, which is overlaid with a gradient, does not show up on Safari (although it works perfectly on Chrome).

body{
  background:linear-gradient(rgba(0, 0, 0, 0.95),rgb(0, 0, 0, 
  0.95)),url("https://www.w3schools.com/cssref/img_tree.gif") no-repeat center center fixed;
  background-size: cover;
  overflow: hidden;
  height: 100%;
}   
<html>
<head></head>
<body></body>
</html>

This is the code snippet from my .css file that specifies the background styling. I attempted changing the linear gradient to -webkit-linear-gradient (as it was suggested as a possible fix for Safari compatibility issues).

In Safari, the background should display an image of a computer covered by a darkened overlay. However, instead of this intended appearance, Safari shows a plain white background.

Answer №1

-webkit-background-size: cover;

One thing I missed was including the letter "a" in my rgba value...

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 dynamically resize a div as the page size changes?

I am currently working on a project that involves a div dynamically shrinking as the page size decreases. However, I have encountered an issue where the height of the div remains constant despite this resizing: CSS .container { min-height: 180px; max ...

Ajax: Why am I receiving an error response instead of a successful one?

It's puzzling why my code is triggering the error function instead of success. The console.log keeps showing me this: Object {readyState: 0, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: f ...

Header reference differs from the document referrer

this is the request header: GET / HTTP/1.1 Host: localhost:3002 Connection: keep-alive sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96" sec-ch-ua-mobile: ?0 User-Agent: ...

Trouble with CSS table background display in Outlook

I am experiencing issues with an HTML table in an email template: <table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;"> <tbody> <tr> &l ...

Steps to activate the image viewer for each individual looping image:

I'm struggling with my JavaScript code that fetches images and displays them in a modal view when clicked. The issue I'm facing is that the image view only works for the second and other images, but not for the first one. I know there are issues ...

Using CSS, eliminate the drop-down menu from the main navigation on Squarespace

While working on my Squarespace website, I've been impressed with how the FAQ page/questions are structured. However, a drawback is that it creates a clunky drop-down menu when hovering over the FAQ tab in the main navigation. You can see an example ...

The function TagBuilder.MergeAttributes is malfunctioning

My attempt at creating a custom helper in MVC is not working as expected. The custom attributes are not being added to the HTML: Custom Helper Function public static MvcHtmlString MenuItem(this HtmlHelper helper, string linkText, string actionName, strin ...

What is the method to assign a value to ng-class in Angularjs?

I need to categorize items in a list by assigning them classes such as items-count-1, items-count-2, items-count-3, items-count-4, based on the total number of items present. This is how I would like it to appear: li(ng-repeat="area in areas", ng-class=" ...

Centralize Arabic symbol characters

Is it possible to center the symbols that by default go above characters such as مُحَمَّد? .wrapper { text-align: center; vertical-align: center; } span { font-size: 4rem; display: inline-block; padding: 2rem; margin: 0.2rem; ba ...

Vue - Display components next to sidebar

Having an issue with the vue-sidebar-menu. The sidebar is appearing over the components instead of beside them. Here is a screenshot of the problem: https://i.sstatic.net/cVgI6.jpg <template> <div id="app"> <sidebar-menu :menu="menu" ...

jquery asynchronous image loading technique

Can images be loaded asynchronously while the page is loading? The images will only be displayed when a user clicks on a button, rather than immediately showing up. As a result, I am curious if it's feasible to preload the images in a cache so that th ...

Steps for creating a basic JQuery function for dividing integers

My website constantly updates with real-time data from our PI server, refreshing every 10 seconds. I've been given the task to take two existing data points already on my page and calculate their division, then visualize the new result on a graph. Due ...

HTML elements are positioned in alignment

I'm currently working on a website and I need some assistance in aligning my images properly. Here's what I have tried: https://i.sstatic.net/suIVu.png However, I haven't been able to achieve the desired result with the following code: &l ...

Changing padding of a button causes surrounding elements to move?

Trying to make a button in CSS appear "pushed down" on :active, I decided to increase the padding-top by 2px and decrease padding-bottom by 2px. However, this adjustment seemed to affect the margins of other elements for some reason that eludes me. I am c ...

How can you hide specific elements in HTML/CSS based on window size without relying on media queries?

How can I create an HTML/CSS toolbar where specific elements disappear completely when the browser size is decreased, similar to how the favorites bar functions in most browsers? The toolbar should be able to display a varying number of items. In this cas ...

Updating user credits through the Model::factory() method is a common practice in my workflow

I need to update the UserCredits after a purchase. For example, if a user currently has 10 credits and purchases 10 more, I want to add the purchased credits to their existing total. The goal is to increment the current credit score with the new credits ...

The mysterious case of the vanishing close button on Curator.io's mobile

Currently, I am using curator.io aggregator to showcase my Instagram feed on the website. An issue arises when switching to mobile view as the close button (class="crt-close") disappears. You can see an example of this here: To replicate the pr ...

Tips for customizing the color scheme of background, rows, row selection, and headers in Angular 4 using Bootstrap 4 data tables

I've integrated Bootstrap 4 data table in my Angular 4 project, but I'm struggling to customize row colors, row selection colors, and header colors. You can check out the example of the data table I'm using at this link: https://github.com/ ...

Exploring Hover Effects in Reactjs and Material UI

I've been working with reactjs and material ui, but I'm having trouble changing the background color of selected items in various components, like in the SelectField. <SelectField floatingLabelText="Choose a sport" value={this.state.val ...

When taking a vertical picture on my iPhone, my Vue component does not function properly

Having trouble with displaying recently uploaded images on a form. If the image is taken from a phone, it may have an exif property that browsers do not handle correctly, causing the picture to appear flipped or sideways. Upside down photo To fix this is ...