CSS: achtergrond gelijk aan scherm resolutie

[TheSixkiller]

ik zou voor mijn website graag een achtergrond gebruiken die zich aanpast aan de resolutie van het scherm. kort gezegt, die zich strecht naar de grote van het scherm.

ik heb het volgende nu staan in mijn CSS file:

.bg_main {
background-image: url('../images/lazer.jpg');
background-color: #000000;
background-repeat: no-repeat;
background-position: fixed;
background-attachment: fixed;
background-width: 100%;
background-height: 100%;
padding : 0px;
margin : 0px;
vertical-align : top;
}


dit heeft als effect dat de afbeelding links boven in de hoek komt te staan, dat hij niet mee beweegt met scrollen, en dat de afbeelding zijn normale grote houdt... maar ik wil juist dat de afbeelding spreid naar grote van het scherm..

is er in CSS een manier om dit voor elkaar te krijgen ? iemand met een goed idee?

[disjfa]

Nee dat kan niet.

Waarom zou je een plaatje willen kunnen laten vervormen van breedte en hoogte? Dan als iemand een dunne hoge browser heeft het er compleet anders uit zien dan als iemand dat niet heeft.

[Not Pingu]

Het kan niet via de CSS background properties, maar wel met een extra <img> tag waar je plaatje instaat. Deze kun je dan uitrekken tot 100% van de hoogte en breedte van de body. Of laat hem alleen in de breedte uitrekken em geef geen hoogte property op, dan schaalt de afbeelding mee en wordt hij niet uitgerekt.

Let er wel op dat de kwaliteit van je image door het schalen (en interpoleren) erg achteruitgaat.

het gaat me niet om de Height en Lenght van de browser maar om de totale resoltie van het schern.
de achtergrond van mijn site moet uitgerekt worden naar de resoltie van het scherm.

Er zijn manieren om via javascript je schermresolutie op te vragen, maar deze zijn erg onbetrouwbaar en werken lang niet altijd. Bovendien valt een deel van de image weg als de gebruiker het browservenster verkleint.

[ Voor 46% gewijzigd door Not Pingu op 19-09-2006 18:34 ]

[TheSixkiller]

sorry, je begrijpt mij denk ik verkeerd.

het gaat me niet om de Height en Lenght van de browser maar om de totale resoltie van het schern.
de achtergrond van mijn site moet uitgerekt worden naar de resoltie van het scherm.

ik weet wel dat dit er waarschijnlijk niet uit gaat zien, maar dat los ik zelf wel weer even op.

het is natuurlijk ook goed dat hij bij de bepaalde resolutie een ander plaatje pakt.
bv.

800x600 gebruik bg1.jpg
1024x768 gebruik bg2.jpg
1280x800 gebruik bg3.jpg

enz... zoiets moet toch mogelijk zijn ,

[TheSixkiller]

Not Pingu schreef op dinsdag 19 september 2006 @ 18:29:
Het kan niet via de CSS background properties, maar wel met een extra <img> tag waar je plaatje instaat. Deze kun je dan uitrekken tot 100% van de hoogte en breedte van de body. Of laat hem alleen in de breedte uitrekken em geef geen hoogte property op, dan schaalt de afbeelding mee en wordt hij niet uitgerekt.

Let er wel op dat de kwaliteit van je image door het schalen (en interpoleren) erg achteruitgaat.

heb je enig idee hoe ik zoiets dan moet formuleren in een CSS sheet ?

[Great-Storm]

Ik gebruik op een van mijn eigen pagina's een stukje java-script om de resolutie te bepalen en als de breedte groter is dan 1024 pakt hij een groter plaatje.

Nou kun je waarschijnlijk ook hier zoiets toepassen.

Code van mij voor bovenstaande:

code:

<?
// ********************************************************************************************************
// Check if the resolution cookie is set, if so load the right back pic, if not, create a new cookie.     *
// ********************************************************************************************************
if(isset($HTTP_COOKIE_VARS["users_resolution"]))
    $screen_res = $HTTP_COOKIE_VARS["users_resolution"];
else {
?>
<script language="javascript">
<!--
writeCookie();
function writeCookie() 
{
 var today = new Date();
 var the_date = new Date("December 31, 2023");
 var the_cookie_date = the_date.toGMTString();
 var the_cookie = "users_resolution="+ screen.width;
 var the_cookie = the_cookie + ";expires=" + the_cookie_date;
 document.cookie=the_cookie
     
 location = 'index.php';
}
//-->
</script>
<?   }
if ($screen_res > 1024)
    {
    $header_image = "IMG/header.jpg";
    $alinea1_image = "IMG/alinea2.jpg";
    $copyright_image = "IMG/copyright2.jpg";
    if ($_GET[pagina]=="")
        {
        $alinea2_image = "IMG/alinea4.jpg";
        }
    else 
        {
        $alinea2_image = "IMG/".$_GET[pagina]."2.jpg";
        }
    $border_width = 1024;
    }
else 
    {
    $header_image = "IMG/header2.jpg";
    $alinea1_image = "IMG/alinea1.jpg";
    $copyright_image = "IMG/copyright.jpg";
    if ($_GET[pagina]=="")
        {
        $alinea2_image = "IMG/alinea3.jpg";
        }
    else 
        {
        $alinea2_image = "IMG/".$_GET[pagina].".jpg";
        }
    $border_width = 800;
    }
// ********************************************************************************************************
?>

Het is niet de beste code die ik ooit geschreven heb maar ik hoop dat het duidelijk is .
(je zal geloof ik ook gewoon een klein stukje javascript kunnen gebruiken uit dit geheel en dat in de css planten via php en dergelijk.)

[disjfa]

En wat als de browser 400 x 600 is Ga je dan weer een ander plaatje maken. Is je ontwerp zo uitrekbaar dat je het netjes in beeld kan krijgen als je het in 800x600 zet. En dan ook nog in 1920x1440

[Not Pingu]

TheSixkiller schreef op dinsdag 19 september 2006 @ 18:33:
heb je enig idee hoe ik zoiets dan moet formuleren in een CSS sheet ?

Geef je <img> een ID, zet in je stylesheet de width en height van de body op 100% en de width van je image (bereikbaar dmv. de ID) op 100%.