CSS background-position not working in Mobile Safari (iPhone/iPad)

The iPhone/Webkit browser cannot center align background images when placed in the body tag. The only way around this is to remove the background image from your body tag and use an additional DIV as a wrapper. #wrapper { background-color: #000000; background-image: url(‘images/background_top.png’); background-repeat: no-repeat; background-position: center top; overflow: auto; } <html lang=”en”> <head> <title>Title</title> … Read more

jquery animate background-position firefox

The version above doesn’t work with jQuery 1.6.1. This one does. (function($) { if(!document.defaultView || !document.defaultView.getComputedStyle){ var oldCurCSS = jQuery.curCSS; jQuery.curCSS = function(elem, name, force){ if(name === ‘background-position’){ name=”backgroundPosition”; } if(name !== ‘backgroundPosition’ || !elem.currentStyle || elem.currentStyle[ name ]){ return oldCurCSS.apply(this, arguments); } var style = elem.style; if ( !force && style && style[ name … Read more

Using percentage values with background-position on a linear-gradient

TL;DR All the percentage values used with background-position are equivalent when using a gradient as background, so you won’t see any difference. You need to specify a background-size different from the container size: body { display: flex; flex-direction: column; justify-content: space-around; align-items: center; min-height:90vh; } .button { text-decoration: none; color: white; font-weight: bold; width: 350px; … Read more

100% height background starting at 50% horizontally

Like you already noticed and as I explained here background-position with percentage won’t behave like you may think. An idea to achieve this is to consider adjusting background-origin like below: .box { padding-left:50%; height:300px; border:1px solid; background:url(https://picsum.photos/200/200?image=1069) left/100% auto no-repeat; background-origin:content-box; } <div class=”box”> </div> the trick is to have the padding covering half the … Read more