[youheardit]

Hejsan!
Vill lägga en stor bakgrundsbild på en hemsidan, sidan kommer att vara 1000px i bredd men hur gör jag med backgrundsbilden och hur den anpassar sig efter alla storlekar på skärmarna.

har sett ett antal sidor.. men inte kunnat läsa hur det fungerar.

ett alternativ jag vet är isåfall att göra bakgrundbilden i alla storlekar en skärm har och sen köra jQuery

$("#wrapper").addClass("body "+screen.width+"x"+screen.height);

eller finns det andra förslag??

tack så mycket!

[fr33r1d3]

Du kanske hittar en bra lösning här:

http://css-tricks.com/perfect-full-p...kground-image/

[vco-systems]

Ursprungligen postat av youheardit

Hejsan!
Vill lägga en stor bakgrundsbild på en hemsidan, sidan kommer att vara 1000px i bredd men hur gör jag med backgrundsbilden och hur den anpassar sig efter alla storlekar på skärmarna.

har sett ett antal sidor.. men inte kunnat läsa hur det fungerar.

ett alternativ jag vet är isåfall att göra bakgrundbilden i alla storlekar en skärm har och sen köra jQuery

$("#wrapper").addClass("body "+screen.width+"x"+screen.height);

eller finns det andra förslag??

tack så mycket!

Du måste anpassa bilden efter läsaren storlek inte efter skärmen, det finns många som inte använder maximerade fönster... och ska du göra så att det fungerar med alla möjliga upplösningar får du lite problem med din lösning

[Captain Thailand]

Ursprungligen postat av fr33r1d3

Du kanske hittar en bra lösning här:

http://css-tricks.com/perfect-full-p...kground-image/

Snyggt! Resultatet:

http://css-tricks.com/examples/FullP...age/tech2.html

[KarlRoos]

http://karlroos.se/projects/fullbg/

Den där gjorde jag för ett tag sedan, kom dock aldrig till användning.

[robbanp]

Om du vill att den ska passa i "alla" storlekar sätter du repeat-x på background-image.

Sedan får du se till att den kan repeteras i x led snyggt

[ooskar]

Jag gjorde något liknande, jag använde php som läste av vilken skärmstorlek besökaren har och satte bredden på en div som är positionerad bakom alla andra.

[youheardit]

Ursprungligen postat av KarlRoos

http://karlroos.se/projects/fullbg/

Den där gjorde jag för ett tag sedan, kom dock aldrig till användning.

Klockrent! enkelt och smidigt att använda tack Karl!

Om du vill att den ska passa i "alla" storlekar sätter du repeat-x på background-image.

Sedan får du se till att den kan repeteras i x led snyggt

jo, det vet jag redan, men vill inte att den ska repeteras.. tack annars!

Jag gjorde något liknande, jag använde php som läste av vilken skärmstorlek besökaren har och satte bredden på en div som är positionerad bakom alla andra.

Hur gjorde du det... tror jag satt på google i 30min efter en lösning där PHP läser av skärmens storlek, fick inte fram något alls! :S

[ooskar]

finns säkert smidigare lösningar, men såhär gjorde jag iaf, och det fungerar rätt hyffsat. Dock måste besökaren ha fönstret maximerat om han ska se hela bilden.

PHP-kod:

<?php
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>
<?
}
?>

[youheardit]

Ursprungligen postat av ooskar

finns säkert smidigare lösningar, men såhär gjorde jag iaf, och det fungerar rätt hyffsat. Dock måste besökaren ha fönstret maximerat om han ska se hela bilden.

PHP-kod:

<?php
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>
<?
}
?>

Aah tack! fast som grabbarna säger ovan så är det ju inte skärmens storlek som man ska ha bilden efter, utan man ska ju anpassa efter webbläsarens fönster..