We Keep Coding

How to disable the "background-attatchment: fixed" when it will cause an error

I have looked all over stack overflow about this question and have found various answers, but none of them fit my needs. I have my background-attatchment set as 'fixed' but as most know this bugs out on ios devices. Is there a way that I can just set the property to 'scroll' when it won't work? If the property is set to 'scroll' from the beginning the picture doesn't resize and do funky things.
I have tried various solutions including '#supports', using web-kits, and other stackOverflow suggested solutions... none of them have worked. I would love either a workaround or even just to have the feature work when it can and be disabled when it can't.
Here's my CSS
.sectionHeader{
background-size: cover;
background-position: center top;
background-attachment: fixed;
max-width: 100%;
height: 100vh;
padding: 0px !important;
margin: 0px !important;
}
And here is one of the div's that this is being applied to:
<div id="welcome">
<div id="jumboName" class="jumbotron jumbotron-fluid sectionHeader d-flex align-items-center" style="background-image: url('data/welcome.JPG');">
<div class="row mx-auto my-auto align-items-center">
<p class="display-3" style="color:WHITESMOKE; text-shadow: 0px 0px 5px black;">Name</p>
</div>
</div>
</div>
Again, the goal for this is either to find a work around, or simply to not have the code break on phones while still haveing the effect on computers. This already happens on most web browsers where it defaults the background style to 'scroll' (brave, opera, and a few others) when it cannot handle the property. Just stupid ios devices aren't smart enough to do that.

I finally found a good answer! The only browsers (that I know of) that do not use this feature are mobile devices. Because of this we can use a media query.
#media (hover: none) {
.sectionHeader{
background-attachment: scroll;
}
}
Using this, we can set the background-attachment property to fixed except when there is no hover enabled on the device.

As far as I know there isn't a way to detect a glitch like that.

Can I use CSS to create this scrolling behavior or should I use jQuery?

I'm looking for suggestions on what to continue researching. I'm trying to create a different scrolling behavior on this website— http://schipperbros.com. The image slider in the "work" section and the white "about" section are to be fixed while the blue introduction section, orange logo section and the last section, "contact" scroll freely.
I basically want it to work like this site http://https://codyhouse.co/demo/alternate-fixed-scroll-background/index.html. The fixed portions of my site will be like the images in this site. This site uses background-attachment:fixed but I don't believe I can use this because my fixed areas are not just a single image—one of my sections is an image slider and the other is made up of copy.
Any thoughts what I could implement or a direction on what I can look for would be very helpful. Thanks you!

First let me tell you what you are wishing to achieve is known as parallax scrolling effect. There are tons of resources you can find.
Now coming to your original question, there are certain websites which use pure css to achieve parallax scrolling. Try this
http://keithclark.co.uk/articles/pure-css-parallax-websites/
The key is to use CSS3 transformations. You can refer http://www.w3schools.com/css/default.asp to find simple examples of CSS3 to understand code in the above website (keithclark).
This should come in handy if you are willing to use JS:-
http://www.jqueryscript.net/tags.php?/parallax/

Here's a really simple example using only CSS. It uses background-attachment: fixed;. Keep in mind background-attachment is not supported in Opera Mini or the Android browser.
html,
body {
min-height:100%;
min-width:100%;
height: 100%;
padding:0;
margin:0;
text-align:center;
font-family: Arial;
}
.background {
width: 100%;
min-height: 100%;
background-size: contain;
background-position: center center;
background-attachment: fixed;
}
.background > div {
background-color: #000000;
color: #ffffff;
padding: 30px 0;
}
.background1 {
background-image: url(http://placehold.it/800x450&text=Background1);
}
.background2 {
background-image: url(http://placehold.it/800x450&text=Background2);
}
.background3 {
background-image: url(http://placehold.it/800x450&text=Background3);
}
<div class="background background1">
<div>Some content</div>
</div>
<div class="background background2">
<div>A Second Page</div>
</div>
<div class="background background3">
<div>A Third Page</div>
</div>
Here's the working demo in jsFiddle;

Solution for image gallery

Ok, to start off, I'm sure out in the internet there is a good tutorial about this, but I can't even manage to "write down" a possible title for the problem, and I apologise for that.
I like a responsive and simple makeup:
<div class="gallery-container">
<img src="/your/image/url.jpg">
<img src="/your/image/url2.jpg">
<img src="/your/image/url3.jpg">
......
</div>
My problem is: I have different aspect ratio images to show off all with the 3:2 aspect ratio.
An easy solution would be to insert the images as a background to the a element with CSS, set it to be centred contained and then, with a simple JS script define a height to be 75% of the a width.
I used this solution before, but this time is not working for me: I need to dynamically insert the images with PHP.
How can I get a similar effect to the above explained CSS technique but with the images declared in the HTML?
UPDATE: something like this: http://jsfiddle.net/fF6GL/ - but I need the above makeup, this one would not work in that case
P.S. if possible, I would like a solution without using a JS library.

If you can put those linked images into a list, this might work:
http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

Ok I got a solution that is working for me, a demo is available here: http://jsfiddle.net/fF6GL/3/
Essentially, I'm just adding the background image on the CSS directly on the HTML:
<div>
</div>
And this is the CSS:
div {
width: 90%;
margin: 0 auto;
}
div a {
display: block;
float: left;
width: 50%;
position: relative;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
For the height, I'm using a small clever trick here:
div a:before {
content: "";
padding-top: 75%;
display: block;
}
This won't work on IE, but sincerely, I don't care.

onclick not working in webkit or mozilla when z-index is negative value

I have the following div set which only works in IE9. On Moz and Webkit the onclick will not fire. If I chaneg the z-index to 0, the onclick works, but I have visibility issues with other elements in the site. Is there a way to get onclick to fire with negative z-indices?
<div id="adbg" style="margin: 0pt auto; height: 1000px; width: 100%; position: fixed; cursor: pointer; z-index: -1;">
<div OnClick="window.open('/bgClicks/2');" style="background: #fff url('http://www.example.com/img/bg/w_1.jpg') no-repeat center top fixed; height: 100%; width: 100%; margin: 0pt auto; cursor: pointer;"></div>
</div>
<div id="wrapper">

Having a z-index of - here is definitely the problem. What is happening in Moz/Webkit is the outcome to be expected, you must have an invisible/transparent laying over the object that is picking up the click, thus not letting it go through to the actual link.
There are several things you can do..
1) Find the object that is over-lying it (Pretty easy in Chrome, just right click - inspect element, and usually the direct element under the mouse will be automatically highlighted in the inspector. Then for this element give a css rule of:
pointer-events: none;
This allows the click to register through it and to the object below.
Please note browser support for this isn't great, so I'd suggest another solution:
2) Restructure your code so that you don't run into this problem, in the logical world why would you have anything over the top of a link anyway, it's down to poor structuring really, re-think your margins/paddings, or make a jsfiddle so we can have a better look :).

Is there a way to set a transition speed on mouse over?

Is there a CSS way or even a javascript way to set a transition speed when swapping images on mouse over? I haven't tried anything so there is no code to provide. I'm wondering if it can me done and an example. Thanks!
HTML
<ul id="navigation">
<li class="link1"></li>
<li class="link2"></li>
<li class="link3"></li>
</ul>
CSS
li.link1 {
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left top;
}
li.link1:hover {
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left bottom;
}

Use jQuery hover
Suppose you have an HTML structure like this:
<div id="element" style="position:relative;">
<img src="image1.gif" id="img1" />
<img src="image2.gif" id="img2" style="display:none" />
</div>
and css :
img {
position:absolute;
top:0;
left:0;
}
jQuery code:
$("#element").hover(function() {
//fadeout first image using jQuery fadeOut
$("#img1").fadeOut(200);
//fadein second image using jQuery fadeIn
$("#img2").fadeIn(200);
}, function () {
//fadeout second image using jQuery fadeOut
$("#img1").fadeIn(200);
//fadein first image using jQuery fadeIn
$("#img2").fadeOut(200);
});
check below link
http://api.jquery.com/hover/
http://api.jquery.com/fadeOut/
http://api.jquery.com/fadeIn/
Here is a fiddle for demo
Here is a fiddle using css3 and jQuery.hover as fallback for ie as mentioned by hustlerinc

yes there is. the first thing you have to specify though is how you're performing the swap.
if there are two layers on top of each other and you're transitioning opacity of them via CSS, then you'd set transition (-webkit, -moz, -o, etc) opacity 1s; where 1s refers to the number in seconds.
if you're doing the transitions via jquery, or another javascript framework, then your animation functions will have an additional available parameter for a speed in milliseconds, like .animate( {properties xyz}, 200 );

You can do it with CSS3, here's the first result on Google:
http://www.w3schools.com/css3/css3_transitions.asp