Jump to content

Multiple image backgrounds

Recommended Posts

Hi. I received an email today from site point extolling virtues of multibackgounds so I thought I'd give it a try. I copied the code and using localhost I could only view one image. (used IE9), so I then tried, firefox, google chrome, opera, and safari, again only one image, yet the site points example functioned. So, I copied their code, changed images to mine (yes the url was correct), still nothing, so.... I posted my page online and viewed it that way and yep, it worked. My question is, what am I missing, why can I view multiple image backgtounds if browsing online but cant if using localhost off line? That quirk seemd to be relevant to al browsers listed above. What am I missing? ... for interest here is their code

 <style>			html {				background-image:url(diagonal-gradient.png), url(53-a.png),url(37-a.png), url(29-a.png);				background-size:  100% 100%, auto, auto, auto;				padding:0;margin:0;				height: 100%;			}		   		</style>

Firefox didnt like the 'background-size' but it still displayed the result but only online. Is off-line testing maybe run in quirk-mode by the browsers? (I call localhost via visual studio 2008)I'd appreciate a bit of education. THanks

Link to post
Share on other sites

One of the images must be overlapping the rest.Try setting background-repeat to make sure they don't repeat and block the others from view.Is background-size a new CSS3 property?Edit: This only happens when viewing offline? Are you using identical code in both places?

Edited by Ingolme
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...