Jump to content
xisto Community
kakingho

Fixed Background Image Just little reminder

Recommended Posts

Easy teahnic, post the following codes between <head>and </head>

<style type="text/css">

<!--

body{background-image: url(under.gif);

background-repeat:no-repeat;

background-attachment : fixed;

background-position: 10% 20%;}

-->

</style>

 


For red colour, change it to your image's location.

For green colour, it is used to set horizontal and vertical position of background image.

 

I hope it can help you. :huh:

Share this post


Link to post
Share on other sites

Be aware that background-attachment: fixed only works on the body tag in IE. Other browsers support it for all elements.
A better way to do what you've done is with shorthand CSS:

body {  background: url(under.gif) no-repeat fixed 10% 20%;}
You can also use other values for your horizontal & vertical dimensions like pixels and ems.

Share this post


Link to post
Share on other sites

Be aware that background-attachment: fixed only works on the body tag in IE. Other browsers support it for all elements.

A better way to do what you've done is with shorthand CSS:

 

body {  background: url(under.gif) no-repeat fixed 10% 20%;}
You can also use other values for your horizontal & vertical dimensions like pixels and ems.

191773[/snapback]


O!! thanks a lot.

I dont know that can use CSS.

It is shorter than my code.

I add this to my library website now :huh:

Share this post


Link to post
Share on other sites

As Tyssen has noted about the compatibility with IE, I'll take this chance to say that having CSS on webpages can be cool and easy management of the look and feel of the webpages. However, CSS can also cause huge and major compatibility problems and errors on different browsers. Fortunately, Firefox browser is able to respond quite close to IE, but still a little issue if you have been noticing and developing webpages for long.Unfortunately, Opera and other browsers appear quite differently from Firefox and IE. Developing HTML webpages has been easy for me. Instead of javascripts, CSS is the real headache when I view my developed pages on different browsers as they need to look identical on different browsers to be of industrial standard. I took alot of time of this compatibility issue.Definately I'm not going to ignore the look and feel for Opera users and focus on Firefox and IE.The alternative method that Tyssen pointed is a very good example for the compatibility issue. Another one is the iframe transparency, which Opera doesn't follow the CSS methods that Firefox and IE does.Worst still, the usages for the CSS 2, a next generation of CSS, where multimedia can be added, from images to flash, audio to video, to provide the worst case compatibility issue.My point to we developers out there is to download different browsers and test your webpages on them before publishing on the Internet. I bet you wouldn't want visitors using different browsers to leave a bad impression on your site if the looks are not as what you expected..Happy developing..

Share this post


Link to post
Share on other sites

And how to add opacity to the above code listing? Is opacity an issue between browsers as well? I try to test using IE, Firefox and Opera to get 'similar' pages.Because of the browser compatibility issues they will never be 'the same', so I don't even try.

Share this post


Link to post
Share on other sites

I think that an easy fix to this issue would be to write a jscript that determines the browser type and have a different stylesheet for each browser.

For the most part, it's only IE that won't do the things you want it to or displays stuff differently (incorrectly) from other browsers. You can use IE conditional comments in your HTML to serve up different styles for IE which means your site won't look broken for people who have javascript turned off.

Share this post


Link to post
Share on other sites

What are those IE conditional comments? You mean for CSS? I usually dont like the back ground fixed, but if when you have the right image or design, it can look pretty cool...

Share this post


Link to post
Share on other sites

You can also do it without having to use CSS. You just have to insert the property bgproperties to the body tag. There might be some are not good with CSS (or at least not yet). :)

 

<body bgproperties="fixed" background="picture.jpg">

Share this post


Link to post
Share on other sites

how to create website with div tags

Fixed Background Image

 

Hi sir.This is lakshmikanth. As a web designer, I want to learn div tags. Please can you give easy methods code.

 

-reply by lakshmikanth

Share this post


Link to post
Share on other sites
images size variation problemFixed Background Image

hi

Thats great u helped a lot to solve my problem. Thank you very much

Achari

-reply by achari

 

Share this post


Link to post
Share on other sites

Be aware that background-attachment: fixed only works on the body tag in IE. Other browsers support it for all elements.A better way to do what you've done is with shorthand CSS:

body {   background: url(under.gif) no-repeat fixed 10% 20%; }
You can also use other values for your horizontal & vertical dimensions like pixels and ems.

yes i am agreed,,by doing it with css coding described above will give more browsers compatibility than doibg it with the help of html only.
the second thing is that pics can also be included in the template of the site,it is the more stable one as i think.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.