Troubles with resizing background images in Google Chrome

I am currently working on the development of this website:

The site is nearly complete, but I am facing some issues with the resizing of two background images. While it works perfectly on Firefox, the second background (text background) is not resizing correctly on Chrome. I am only using CSS for this, so here’s my CSS code for it:

#fondo1{
    background-image: url("images/imagesbackground/BACKGROUND-INICIO.jpg");
    background-attachment: fixed;
    background-position: top center; 
    background-repeat: no-repeat;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    position:absolute;
    width:100%;
    height:100%; 
}
#fondo1int{
    background-image: url("images/INICIO.png");
    background-attachment: fixed;
    background-position: center center; 
    background-repeat: no-repeat;
    background-size: 50%;
    -moz-background-size: 50%;
    -webkit-background-size: 50%;
    position:absolute;
    width:100%;
    height:100%; 
}

I have set the size to 50% on the second div because otherwise, it would be too big. By the way, I am using parallax, but as far as I know, it shouldn't affect it at all.

Here is the image on Chrome:

And here is the image on Firefox:

Any suggestions or ideas to resolve this issue?

jqueryhtmlcss

Answer №1

To ensure consistent behavior in all browsers, consider removing the -webkit-background-size: 50%; property from your #fondo1int within your .css file.

Ultimately, the updated class should resemble the following:

#fondo1int {
   background-image: url("images/INICIO.png");
   background-attachment: fixed;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 50%;
   -moz-background-size: 50%;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

I hope this information proves useful to you!

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

Using only CSS to reverse the order of Bootstrap rows within a forEach statement in a .php file

I am facing a challenge in reversing rows within a forEach statement. For instance, in the first row, the content's div (title, text) should be on the left side and the image on the right side. In the second row, it should be reversed, with the image ...

javascriptphphtmlbootstrap-4sass

The functionality of the margin gets disrupted when the float property is not included

Could someone please explain why the margin stops working when I remove the float property? Is there a connection that I am missing? .header-image { float: left; width: 33%; margin-top: 1em; padding-right: 3em; text-align: right; } ...

css

If the title is a match, append an attribute to a tag

Is there a way to automatically add the attribute "target=_blank" to an <a> tag if it has the title "extension" assigned to it? <ul id="mob-right-menu"> <li class="menu-item><a href="#">Work</a></li> <li class="menu- ...

jquery

AngularJS Services and Factories that are loaded at startup rather than on-demand

Having an issue with my AngularJS application. I have defined some factories that are injected into controllers as needed. The problem is that these factories are initialized when the application first starts up. One problematic service is: PlanningPoker ...

javascripthtmlangularjs

Sharing information using Fancybox 2

I have encountered an issue while using a form within a fancybox window to post data via Ajax to a php page. The form works perfectly fine when run outside of the Fancybox - insertion and response are both successful. However, when I run the same page thr ...

phpjqueryajaxfancybox-2

Submitting forms that contain files using jQuery and AJAX

Despite searching through numerous questions on this topic, I have yet to find a solution to my specific issue. My objective is to successfully submit an entire form, potentially containing files as well. The code I currently have is not working: $(target ...

javascriptphpjqueryajaxforms

Centering Tabs in React-Bootstrap

By default, Bootstrap-react's tabs align to the left. <Tabs defaultActiveKey={2} id="uncontrolled-tab-example"> <Tab eventKey={1} title="Tab 1"> Tab 1 content </Tab> <Tab eventKey={2} title="Tab ...

cssreact-bootstrap

unable to auto-populate drop-down selection based on selected value in AngularJS

Currently, I am implementing a drop-down within an ng-repeat loop in AngularJS. Here is the HTML code snippet: <select class="form-control" ng-model="l.Language" ng-change="languageChange($index, l.Language)" ng-options="L.ID as L.LanguageDDL for L i ...

htmlangularjs

What is the best way to run a function after 10 seconds of inactivity using jquery?

Can anyone help me figure out how to run a function every 10 seconds when the system is idle? Here's an example: setInterval(function () { test(); },10000); //for every 10 Sec I really need assistance in getting this function to ...

javascriptjqueryhtml

Reducing the amount of nesting within selectors

Check out this code snippet: .signin-input{ input{ width: 100%; height: 2.5rem; color: black; :placeholder-shown{ opacity: 1; } } The CSS result looks like t ...

cssless

Execute `preventDefault` prior to authenticating the User with Dev

In my index, I have a modal with a user sign-up form. I created a JavaScript function that triggers when the "Save" button is clicked. If users encounter errors, alerts appear in the modal but it redirects to another page. I want the page to stay on the c ...

javascriptjqueryruby-on-railsajax

Is there a way to automatically scroll to a specific row within a fixed-size div that contains a table?

I am facing an issue with scrolling a row into view inside a fixed height div when the data in that row is changed. I have tried multiple methods from StackOverflow questions, but none of them seem to work for me. automatically-scroll-table-when-the-sele ...

jqueryhtmlangularjs

Create several slider instances using a WordPress plugin

I have recently customized the Smooth Div Scroll jQuery plugin () and successfully integrated it into a WordPress website as a plugin. I have also created an options page in the WordPress admin area, allowing users to customize the slider according to thei ...

phpjquerywordpresssmooth-scrolling

Creating individual components for <select> and <option> elements in ReactJS

I am uncertain about how references function when the select and option tags are used together. When I split them into separate React components, they stop working. How can I resolve this issue? Here is a basic example: <select> {() => ( ...

javascripthtmlreactjs

Exploring the power of JQuery Ajax and manipulating Object fields

I am trying to figure out how to properly set the value of this field in my code: MyObject = function(){ this.field = null; this.build = function(){ var my_url = "..."; var my_data = "..."; $.get(my ...

jqueryajaxobject

A guide on implementing a Material UI table to display one row at a time on each page

I'm currently working on incorporating a Material UI table to showcase content with just one row per page. After successfully loading the page and displaying the first row, I encountered an issue where navigating to subsequent pages does not render a ...

cssmaterial-ui

In both Chrome and Edge, the default value for the <select> tag is successfully set, however, this functionality is not working in

I have defined two values in the created method, 2018 and My Name, and assigned them to separate data properties. These data properties are then passed as v-bind to a component. The issue I am facing is that in Chrome and Edge, both values are set as defa ...

javascripthtmlvue.js

Having issues with AJAX and .change() function not functioning correctly?

I am working on two drop-down menus. The first menu displays the provinces in the country, and when a province is selected, the second menu should show the districts within that province. The following code is for displaying the provinces: $(document).re ...

javascriptjqueryajax

What is the best way to apply a background-image to a DIV while also implementing a double line border to prevent the image from showing through the border?

Within my DIV, I have applied a background-image and added a double border to the DIV. The image is currently visible in between the lines. Is there a method to resolve this issue and prevent the image from displaying in this manner? ...

cssborder

Restrict the number of dynamic form elements to a maximum of 10 entries

I am working on a feature where users can refer their friends and the data will be saved in a database. <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type='text/javascript' sr ...

javascriptphpjqueryhtml