1. Mol4
  2. Sherlock Holmes
  3. Commercial Templates
  4. Wednesday, 04 July 2018
  5.  Subscribe via email
Hello Ciarán,
On my clients test website I'm using the Sophia template.
For the homepage there is a text (Onze Visie) in modulepostion top-2a.
In the 'Module Style Override' of the template I've choosen a background image for this position.
Because I want this background image fixed I've added the following css to the custom.css file:
.top-2a .module_surround {
background-attachment: fixed!important;
}
Now this is working well in Firefox but in Chrome there is no background at all (only visible when I zoom the page out as far as I can go) and in IE the background 'hops arround' while scrolling down the page.
Can you think off a way how to fix this?
Thanks!
Greetings Ton
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ton

To amend you can add the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.top-2a .module_surround {
background-attachment: fixed!important;
-webkit-backface-visibility: hidden;
}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciarán,

Thanks!
This solves the issue in Chrome.
But unfortunately in IE the image still 'hops arround' wehn scrolling the page.
Thanks,
Ton
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ton

Unfortunately we are unable to replicate your issue using IE. Are you having similar issues with IE on other websites with fixed backgrounds?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciarán,
I didn't pay attention to other sites with backgrounds fixed because I never use IE (11) :)
But I managed to get the background image not to move with a script I found regarding this issue (there are many and not all work :( )
<script>
jQuery( function() {
if(navigator.userAgent.match(/Trident\/7\./)) { // if IE
jQuery('body').on('mousewheel', function () {
// remove default behavior
event.preventDefault();
//scroll without smoothing
var wheelDelta = event.wheelDelta;
var currentScrollPosition = window.pageYOffset;
window.scrollTo(0, currentScrollPosition - wheelDelta);
});
}
});
</script>
Only thing is that the whole page is not going smooth when scrolling, but maybe this is the best solution for IE.
Thanks!
  1. more than a month ago
  2. Commercial Templates
  3. # 4
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok