Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Bakgrund på hemsidan som inte är en Reapeat bild.

1
Skriv svar
Permalänk
Inaktiv
●

Bakgrund på hemsidan som inte är en Reapeat bild.

Ska påbörja min nya hemsida nu och jag tänkte om man ha en bakgrundsbild som är en hel bild (1920x1080 px) och inte en 2 pixel bild som repeat'ar om och om igen.

Har hört att det finns väldigt mycket problem med detta eftersom alla har olika upplösningar men jag tänkte kolla om det var någon här på forumet som visste säkert något sätt så man vet att det funkar helt och hållet.

Jag kan HTML,CSS,PHP och lite Javascript.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Finns en jQuery-plugin för detta som heter supersized, funkar utmärkt
http://www.buildinternet.com/project/supersized/

Visa signatur

Detta är första varningen va, jag ämnar brisera ur denna japanska kampställning och fullständigt förinta dig om inte du försvinner härifrån.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Morpiha:

Ska påbörja min nya hemsida nu och jag tänkte om man ha en bakgrundsbild som är en hel bild (1920x1080 px) och inte en 2 pixel bild som repeat'ar om och om igen.

Har hört att det finns väldigt mycket problem med detta eftersom alla har olika upplösningar men jag tänkte kolla om det var någon här på forumet som visste säkert något sätt så man vet att det funkar helt och hållet.

Jag kan HTML,CSS,PHP och lite Javascript.

Gå till inlägget

Det finns många sidor som använder fullskärmsbilder.
Några exempel:
www.quakelive.com (2042px x 1200px)
www.fz.se (1 680px × 1 050px)

fz.se kör ofta reklam runt hela sidan. Notera att bilden övergår till svart åt alla håll för att bilden inte kan fortsätta nedåt i all evighet, dessutom fungerar detta med alla olika upplösningar.
quakelive.com har en stor upplösning på en gång för att täcka många upplösningar (1440px i bredd ser nog fel ut om man skulle ha en sådan skärm) men den sidan blir aldrig större än 1200px i höjd.

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Redigera
Citera flera Citera
Permalänk
Inaktiv
●
Skrivet av Loaded:

Finns en jQuery-plugin för detta som heter supersized, funkar utmärkt
http://www.buildinternet.com/project/supersized/

Gå till inlägget

Men funkar det som att ha som bakgrund på hela hemsidan då?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Morpiha:

Men funkar det som att ha som bakgrund på hela hemsidan då?

Gå till inlägget

Ja, det är det den är till för. Du måste ju dock lägga in jQuery också för att det ska fungera. Hur mycket javascript kan du?

Visa signatur

Detta är första varningen va, jag ämnar brisera ur denna japanska kampställning och fullständigt förinta dig om inte du försvinner härifrån.

Redigera
Citera flera Citera
Permalänk
Inaktiv
●
Skrivet av Loaded:

Ja, det är det den är till för. Du måste ju dock lägga in jQuery också för att det ska fungera. Hur mycket javascript kan du?

Gå till inlägget

Jag kan mest simpla grejer men jag vet hur man göra för att få ett externt Javascript document samt hur man "kopplar" samman den med min Index.html
Så jag kan inte så jätte avancerade grejer.

Redigera
Citera flera Citera
Permalänk
Inaktiv
●
Skrivet av Leedow:

Det finns många sidor som använder fullskärmsbilder.
Några exempel:
www.quakelive.com (2042px x 1200px)
www.fz.se (1 680px × 1 050px)

fz.se kör ofta reklam runt hela sidan. Notera att bilden övergår till svart åt alla håll för att bilden inte kan fortsätta nedåt i all evighet, dessutom fungerar detta med alla olika upplösningar.
quakelive.com har en stor upplösning på en gång för att täcka många upplösningar (1440px i bredd ser nog fel ut om man skulle ha en sådan skärm) men den sidan blir aldrig större än 1200px i höjd.

Gå till inlägget

En fråga bara.
Jag testade göra en bild i photoshop som är 2042px x 1200px i storlek.
Sen så tar jag och sparar den och använder CSS för att få in den på hemsidan. Men den blir bara jätte inzoomad och konstig.
Vad ska jag göra för att den ska vara mindre på själva sidan?

Citat:

@charset "utf-8";
/* CSS Document */

body
{
background-image:url(bg.png);
height:100%;
width:100%;
}

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Morpiha:

En fråga bara.
Jag testade göra en bild i photoshop som är 2042px x 1200px i storlek.
Sen så tar jag och sparar den och använder CSS för att få in den på hemsidan. Men den blir bara jätte inzoomad och konstig.
Vad ska jag göra för att den ska vara mindre på själva sidan?

Gå till inlägget

Om du tittar på hur fz och quakelive implementerar bilden så borde det fungera.

CSS för body

url('bild_url') no-repeat scroll center top black;
Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Du borde Tänka på Mängden Data som måstes ta emot, så att Page Load timen inte blir allt för hög.

Redigera
Citera flera Citera
Permalänk
Inaktiv
●
Skrivet av raldo94:

Du borde Tänka på Mängden Data som måstes ta emot, så att Page Load timen inte blir allt för hög.

Gå till inlägget

Därför jag använder "Save for Web and Devices" när jag sparar bilder från photoshop. Så jag försöker få dom så små som möjliga

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Morpiha:

Men funkar det som att ha som bakgrund på hela hemsidan då?

Gå till inlägget

Jag använder supersized på min hemsida, det är super simpelt att sätta upp. När du tankar ner scriptet ifrån hemsidan som länkades tidigare så kommer allt med som du kan tänkas behövas. Det finns även lite exempel på hur scriptet kan användas på hemsidan. Själv har jag valt att skala bort nästan allt och bara använda de mest "basic" funktionerna.

Sidan som jag använder scriptet på:
http://nukeaduke.com

Bilderna är 1366x768 pixlar stora och sedan upp/ner skalade för att passa alla upplösningar och bildformat.

Redigera
Citera flera Citera
1
Skriv svar