WN - Stor bakgrundsbild! lite hjälp?

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Stor bakgrundsbild! lite hjälp? (https://www.wn.se/forum/showthread.php?t=1041224)

youheardit

2010-03-30 18:35

Stor bakgrundsbild! lite hjälp?

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

Kod:

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

eller finns det andra förslag??

tack så mycket! :)

fr33r1d3

2010-03-31 10:42

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

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

vco-systems

2010-03-31 11:00

Citat:

Ursprungligen postat av youheardit (Inlägg 20348878)

Kod:

$("#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

2010-03-31 13:02

Citat:

Ursprungligen postat av fr33r1d3 (Inlägg 20348987)

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

2010-03-31 16:22

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

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

robbanp

2010-04-07 10:38

Repeat-x

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

2010-04-07 15:46

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

2010-04-07 17:58

Citat:

Ursprungligen postat av KarlRoos (Inlägg 20349049)

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!

Citat:

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! :)

Citat:

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

2010-04-07 18:09

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

2010-04-07 21:23

Citat:

Ursprungligen postat av ooskar (Inlägg 20350096)

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..

Alla tider är GMT +2. Klockan är nu 14:06.