Issue with background image not displaying properly in Safari versions 4 and 5

I'm having trouble getting my logo to display in Safari 4/5. Does anyone know what could be causing this issue?

Here is the CSS code I'm using (before compilation):

background: url("../img/logos%20and%20icons/logoLrg.png") no-repeat scroll 0 0 / contain rgba(0, 0, 0, 0);
@media(max-width:400px){
    background: url("../img/logos%20and%20icons/logoSML.png") no-repeat scroll 0 right / contain rgba(0, 0, 0, 0);
}
display: block;
height: 50px;
margin-top: 29px;
width: 205px;
z-index: 255;

Answer ā„–1

attempt it without any spaces

background-image: url("../images/logo_large.png") no-repeat scroll 0 0 / cover rgba(0, 0, 0, 0);
@media(max-width:320px){
    background-image: url("../images/logo_small.png") no-repeat scroll 0 right / cover rgba(0, 0, 0, 0);
}
display: block;
height: 50px;
margin-top: 29px;
width: 205px;
z-index: 255;

Answer ā„–2

There is a simple solution for setting a path for a background image in a style sheet without using URL encoding. By replacing the %20 with a + sign, you can easily solve this issue. Stay tuned for more information on this topic!

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

Incorporate a Bootstrap panel featuring a stylish border design and perfectly centered text

I am attempting to design two panels in Bootstrap with centered text and different fonts. Similar to the layout shown in the image below https://i.sstatic.net/aVGwV.png Here is my code: <div class="row"> <div class="col-lg-6&q ...

What is the best way to set up a dropdown menu in a data grid where the width matches the fields?

I am looking to optimize the layout for various screen resolutions and ensure compatibility with the latest versions of IE, Firefox, and Chrome. https://i.sstatic.net/3OLh0.jpg ...

Stopping the parent onclick event from propagating to a child element within a bootstrap modal

I am currently working with angularjs and bootstrap, incorporating nested onclick events using Angular's ng-click in various HTML elements. One is located in a table header to display different sort icons and execute the sorting logic when the header ...

The Zurb Foundation grid system is causing issues when trying to implement vertical tabs

My vertical tabs are giving me trouble when I try to nest grid or block elements, causing everything to overflow outside the element. For example, in the image below, the numbers 1,2,3 should be in the right section. <div class="row"> <div class ...

Develop interactive div elements with the help of JavaScript/jQuery

Exploring dynamic div creation using javascript or jquery and looking for guidance. <div id="clickable"> <button class="start">Default</button> <button class="random">Randon</button> <button class="gradient"> ...

Website Not Loading Correctly

Why is my webpage not loading properly, even though it has the same HTML and CSS as my other functioning pages on the site? The page loads without the h1 element. If I comment out the span used for adding a transparent background image behind the whole we ...

Can HTML code be saved in "context" and then utilized in one of the templates?

I am striving to extract the code of a table from another website using selenium, save it in the context dictionary, and then embed it into one of the templates so that it seamlessly becomes part of the page's HTML structure without displaying the cod ...

Adding a PHP file into an HTML page using JavaScript include

Recently, I was assigned to collaborate with a third-party vendor who displays movie times on their platform. We were given the opportunity to co-brand our website on their platform by creating a wrapper for our site. This wrapper would allow the movie tim ...

Is there a way to modify HTML using a C# program in a web browser?

Iā€™m considering the possibility of editing the HTML document text through the web browser. I am currently working on an email client that utilizes an HTML template for its design. Everything seems to be in order, but now I need to customize the template ...

Tips for Aligning h5 Headings with Unordered Lists

My footer contains the following code: HTML: <div class="container"> <div class="row"> <div class="col-md-6"> <div class="pull-right"> <h5><u><i>Information</i></u> ...

The CSS isn't loading properly once the file is uploaded to the server using FileZilla or cPanel

After uploading the file.css file to the server using both FileZilla and cPanel, I noticed that when I visit the website, the CSS is not being applied properly. Specifically, I changed padding-left: 10px; However, upon viewing the Page source, it appears ...

What is the best way to position an image in the center for mobile screens?

Struggling to center an image for mobile devices, I have successfully done so for tablets and regular desktop devices. However, I am facing challenges in editing the code to ensure full responsiveness for mobile devices. Additionally, there is excess white ...

Is it possible to utilize HTML as a platform for interfacing with a C/C++ program?

As I work on a new product with USB interface, I need to create a control app for it. However, my GUI programming skills are limited, so I have thought of using a local web page within the app's installation directory as the interface for the program. ...

I have just started a new project in Vue and noticed that the app div has some extra margin around it. Can anyone

In my fresh Vue project, I have the following code: App.vue: <template> <div id="app"> <p>hello</p> </div> </template> <script> export default { name: 'App', components: { } ...

Having trouble displaying a dynamically created table using jQuery

I'm a newcomer to jQuery and I need help with querying 2 web services. The goal is to query the first service, use an attribute value to query the second one, and then populate a table with data from both services. Please take a look at my code on th ...

React is encountering a problem with loading the image source and it is

<img src="play.jpg" alt="play"></img> This code works fine in standard HTML, but I'm having trouble getting it to work in React. Is adding it as a background the only solution? ...

Building a local database using the MVC framework concept

Can a locally stored database be developed using MVC framework principles in javascript and html5? Thank you Ravindran ...

Creating a FreeMarker template in NetSuite for PDF generation that includes double sorting by date, accommodating possible empty values

My task involves organizing a list of records and displaying them in a table, with sorting based on the "From Date" column as the primary criteria, followed by the "To Date" column at a secondary level. I searched through the documentation for ?sort_by, bu ...

When importing data from a jQuery AJAX load, the system inadvertently generates duplicate div tags

Currently, I am utilizing a script that fetches data from another page and imports it into the current page by using the .load() ajax function. Here is the important line of code: $('#content').load(toLoad,'',showNewContent()) The issu ...

I desire a smooth fade-in transition for the background image when the addClass function is

If the background color is set to header-fixed-position, the color will fade in. However, if the background is an image, the image will not fade in. Apologies for my lack of proficiency in English. Please refer to the sample code below. Try removing the c ...