background-image

Background-size: cover not working in any browser

由 血红的双手。 提交于 2019-12-12 02:54:49
问题 I have the following HTML code: <header id="header"> <h1><span id="titlu-pagina">Watercolors</span></h1> <ul> <li><a href="#">About Me</a></li> <li><a href="#">Where To Find Me</a></li> <li><a href="#">The Blog</a></li> </ul> </header> and the respective CSS one: #header { height: 800px; text-align: center; border-bottom: 1px solid black; background-color: #734C8F; background-image: url('10.jpg'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;

How to keep background in fixed place while scrolling

由 前提是你 提交于 2019-12-12 02:47:27
问题 Here is the css #bigwrapper{ background-image: url('http://www.w8themes.com/wp-content/uploads/2013/09/Water-Backgrounds.jpg'); background-repeat: no-repeat; background-position: fixed; width: 100%; } Here is the html <body id="bigwrapper">...</body> As i scroll down i want to be able to keep the background image in the same place. I did this with my header and it worked, but hasn't worked out for the background image. Here is how i did it with my header css below .header1{ position: fixed;

Get background-image src from div and set that as an image's src

由 旧城冷巷雨未停 提交于 2019-12-12 02:24:43
问题 So I'm trying to grab the background-image from a div when it is clicked and set it as the src of an img element somewhere else on the page. The issue is that I'm getting an error saying that the file is not found. I understand that this has something to do with the path that I'm assigning to the img's src, however I am unable to see what's wrong with the code. When the div in question is clicked it calls a function document.getElementById('rice-bowl').onclick=openModal; And below is the

Scalable Background HTML CSS Javascript

由 删除回忆录丶 提交于 2019-12-12 01:35:37
问题 Does anyone know of a way to have a background image scale to the dimensions of the browser window it is in? I know CSS3 allows for background width, but I need something more compatible. Many thanks, Elliott 回答1: You cannot do it with a background-image , as it does not support sizing. You have to fake it by putting an img tag that stretches 100% in both directions and position it behind your content using absolute positioning and z-index . Something like this should work: <body> <img class=

choose random value only once

由 安稳与你 提交于 2019-12-12 01:34:58
问题 My page loads a random background image every time it loads: <?php $input = array(1, 2, 3, 4, 5, 6, 7, 8); $num = array_rand($input, 1); $bg = "img/bg" . $num . ".jpg"; ?> But I want it to do that only once. I want the image to remain the same after a visitor submits a form, for example, thereby reloading the page. I've tried if($bg=NULL) etc, but to no avail - I guess $bg becomes null again every time the page reloads. Many thanks in advance! 回答1: You can use Session variable or cookies if

Reload backgrounds to fix bug with chrome

由 ＊爱你＆永不变心＊ 提交于 2019-12-12 00:59:30
问题 After fixing CSS background-image style formatting to get better compatibility with Firefox and IE, I found that Chrome intermittingly loses the background images when you scroll up and down on the page. It happens not all the time but still so frequent that users will notice that you sometimes loose the background on your side panels and bottom panels. Being a javascript novice, I started to create something very simple in order to fix the website located at: http://greencoconut.nl/over/

CSS background image that can scroll

由 梦想与她 提交于 2019-12-12 00:37:48
问题 I am trying to create a background image that will have a scroll bar to scroll the image down vertically. I like the idea of using width and height percentages because it seems like this method always fits the image to any screen resolution. Unfortunately, the length of the image is rather large and therefore the bottom of the image gets cut off. I have tried various ways to get this working including changing the background-size properties, using overflow-y:scroll and other edits that are

How to position an image sprite at the bottom of an element of unknown height

由 自闭症网瘾萝莉.ら 提交于 2019-12-12 00:34:04
问题 I am using an image sprite that consisting of four "sub-images": four corners for a div element. The sprite is 40px by 40px. Each "sub-image" is 20px by 20px. Each corner's "sub-image is on the opposite corner of the sprite of where it would be on the dev element. For example, the top-left sub-image is at the bottom-right of the sprite. This div element is 440px wide and 100% tall. I've got the top corners down but how do I get the bottom corners? Is there a way to do this without creating a

HTML email background on body not working in Outlook 2013

由 情到浓时终转凉″ 提交于 2019-12-11 21:17:04
问题 I have the following html, if i open it up on browser it works fine..but when i send it as a mail to my outlook 2013, i dont see the background.. <!DOCTYPE html> <html> <head> <title>Untitled Document</title> </head> <body style='background-image: url("http://postimg.org/image/t6abf7srn/");background-repeat:no-repeat'> </body> </html> I have tried options 1 and 2 given at this link : http://blog.mailermailer.com/email-design/background-images-in-html-email-the-naked-truth Have tried the

jQuery overlapping images during transition (trying to make background transition)

由 浪尽此生 提交于 2019-12-11 18:38:55
问题 I'm trying to make a background transition between images, but I have this problem, the image appears to be on top on everything during the transition, and covers the fields and buttons. Then it goes behind them again. I have a div with negative margin (the background one) before the real content like this: <div id="background"> </div> <div id="realcontent"> </div> You can see it on this jfiddle http://jsfiddle.net/k9e5f/2/ If I put everything inside the same div and change the opacity, the
订阅 background-image