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
Checkout this example: #content { height: 300px; text-align: center; font-size: 26px; color: #000; position:relative; } .bg{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat; animation-name: MOVE-BG; animation-duration: 100s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes MOVE-BG { from { transform: translateX(0); } to { transform: translateX(-187%); } … Read more
I had this problem too. It’s easy in most browsers, but IE8 and below it’s tricky. Solution for modern (anything not IE8 and below) browsers: #scroller_shadow { background: url(../img/ui/shadow.png) center repeat-x; background-size: auto 100%; } There are jQuery plugins that can mimic background-size for IE8 and below, specifically backgroundSize.js but it doesn’t work if you … Read more
When you change border or background style on text inputs They revert back to the very basic rendering mode. Text inputs that are os-style are usually overlays (like flash is) which are rendered on top of the document. I do not believe there is a pure CSS fix to your problem. Best thing to do … Read more
If you want to replace the background image with nothing (i.e. make it inactive or “turn it off”), use the “none” keyword in your downstream style sheet: background-image: none;
Here’s a workaround: Open your .svg file, find the <svg> tag at the beginning and add the following property inside it: preserveAspectRatio=”none” Source: http://www.yootheme.com/support/question/6801?order=modified
In a background property you can add background-color, repeat, no-repeat and other image attributes, but in the background-image property you are only allowed to add image. background-image: url(“img_tree.png”); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; and in background property you can do in one line all these background: #ccc url(paper.gif) no-repeat;
Here I made an example with 2 divs: .content which contains everything you need in frontend .background – with text, images and everything else in background To overwrap one div on another (make an overlay) you have to put them into same element, in this example it’s #wrapper div. Put position: relative and width/height for … Read more
The only way I know of to do this is to load the image using Javascript, and then set that image as the backgroud. For example: var bgImg = new Image(); bgImg.onload = function(){ myDiv.style.backgroundImage=”url(” + bgImg.src + ‘)’; }; bgImg.src = imageLocation;
Updated for 2020: Yes, it can be done! Here’s how. Snippet demo: #mydiv{ animation: changeBg 1s infinite; width:143px; height:100px; } @keyframes changeBg{ 0%,100% {background-image: url(“https://i.stack.imgur.com/YdrqG.png”);} 25% {background-image: url(“https://i.stack.imgur.com/2wKWi.png”);} 50% {background-image: url(“https://i.stack.imgur.com/HobHO.png”);} 75% {background-image: url(“https://i.stack.imgur.com/3hiHO.png”);} } <div id=’mydiv’></div> Background image [isn’t a property that can be animated][1] – you can’t tween the property. Original Answer: (still … Read more