FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

CSS Problems and Questions.

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


dbdb
Well firstly I was having a problem with CSS because it made images loose their transparency, so my rounded edge box did not look great. I wondered if this is just a problem that doesn't go away or if there is a way to sort CSS to make it load transparent gifs.

The second problem I was having was with getting the background image to be 100% of the size of the browsers window. So far I have this but the height and width do not work. How do I do that?

Code:
{
background-image:
url('http://www.mysiteimage....');
background-repeat:no-repeat; width:100%; height:100%;
background-position: top center
}

I need the whole image to be as the background not just part of it so I cannot just make it massive and it needs to expand when the user adjusts the window.

I hope someone can help. Thanks.
LukeakaDanish
Firstly: CSS + transparent gif's doesn't make any difference to the transparency - so your problem must be arising from something different.

If you are applying absolute position your "positioned" element might be moving in front of the rest of the document - if this is the case I will explain how the attribute "z-index" works.

If you are using transparent pngs the problem may be arising from viewing the page in IE6 - as this browser doesn't support transparent pngs (regardless of whether you apply any css attributes)


Secondly: stretching backgrounds.

First of all let me specify: There is no css attribute that changes the scale of the background.

Don't worry though - there are many ways to get around that...

The way I would do it is:


  • Add an <img> with the background image in its src.
  • Add the following styles: width: 100%; height: 100%;
  • Put your content (rest of the page) inside a div with the following style: position: absolute; top: 0; left: 0;
  • Add the following style to your body tag: margin: 0;


One thing you should note though: images which are scaled with html scaling (or css - same thing) look very "crap". If you wan't I could help you code an ajax/php image scaling program that could provide the image scaling with much more high quality.

- Tell me how it works...!
jylan
First of all your CSS rules are invalid. You cannot put width and height values in the background-repeat selector. You also do not need to put quotes around your url. To answer your question about width and height, the image will display with the same width and height that it actually is. For example, if use an image that is 10px by 10px, it will display as 10px by 10px and you can't change that.

The CSS code should be written as follows:

Code:


#whatever {
background: #000 url(http://www.mysite.com/images/background.gif)  top center no-repeat;
}


This will achieve the same effect as your code, and it should validate. hope that helps. Tell me if it didn't. Very Happy

Edit: The #000 in the code is the color that will come into effect if the image can't be found. In this case the color is black.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.