Forum Mjukvara Programmering och digitalt skapande Tråd

Hur får jag bakgrundsbilden att passa alla?

1 2
Skriv svar
Permalänk
Medlem
●

Hur får jag bakgrundsbilden att passa alla?

Hejsan alla Sweclockers! Jag håller på att göra en hemsida via HTML/CSS. Jag har gjort en bild som jag hade tänkt att ha som bakgrund, men hur får jag den att passa för allas upplösningar? Tex om jag tar 1280x768 i storlek på bilden blir den för liten för mig, men den passar fint för de med just den upplösningen. Har ni något lösning på detta eller behöver ni mer information först?

Visa signatur

Processor: Intel Core i7 930 @ 4,01Ghz Kylning: Corsair H100i Moderkort: ASUS P6T Deluxe v2 Internminne: Corsair 12GB Grafikkort: 2xEVGA GeForce GTX 780 SC ACX System Disk: Intel X25-M SSD 80GB G2 Hårddisk: 300GB WD VelociRaptor Chassi: Corsair Graphite 760T Arctic White Nätaggregat: Corsair HX 850W 80+ Ljudkort: Creative Sound Blaster X-Fi Titanium HD Operativsystem: Windows 8.1 Pro Eyefinity: 3x23" Samsung S23A700D 120Hz

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

background-size: 100%; fungerar i CSS3. Men det kommer se förfärligt ut oavsett vilket metod du använder.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Heltäckande bakgrunder är inte speciellt snyggt heller.

Ladda upp en bild på hur det ser ut

Redigera
Citera flera Citera
Permalänk
Medlem
●

Okej, så här ser det ut just nu:

Jag vill även få Menyn där och allt att åka ner så att Bakgrunden blir som en bild högst upp, själv texten på bakgrunden. Det är rätt storlek för mig nu då jag anpassat det efter min upplösning. Hört att det ska funka med javascript, men funkar verkligen javascript om jag inte kör php?

background-size: 100%; funkade, men som sagt så ser det förfärligt ut.

Senast redigerat
Visa signatur

Processor: Intel Core i7 930 @ 4,01Ghz Kylning: Corsair H100i Moderkort: ASUS P6T Deluxe v2 Internminne: Corsair 12GB Grafikkort: 2xEVGA GeForce GTX 780 SC ACX System Disk: Intel X25-M SSD 80GB G2 Hårddisk: 300GB WD VelociRaptor Chassi: Corsair Graphite 760T Arctic White Nätaggregat: Corsair HX 850W 80+ Ljudkort: Creative Sound Blaster X-Fi Titanium HD Operativsystem: Windows 8.1 Pro Eyefinity: 3x23" Samsung S23A700D 120Hz

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Javascript är ett separat klient språk, det funkar utan PHP (server språk) och tvärt om.
Det enklaste du kan göra för att få ner menyn är att sätta margin-top: XXXpx; på menyn där XXX är antalet pixlar du vill att den ska hoppa ner, även om det inte är det mest semantiska.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Men fungerar Javascript om man lägger upp det på webs.com? Provade även att öppna index.html i Dreamweaver CS5.1 men det blev bara huller om buller.

Visa signatur

Processor: Intel Core i7 930 @ 4,01Ghz Kylning: Corsair H100i Moderkort: ASUS P6T Deluxe v2 Internminne: Corsair 12GB Grafikkort: 2xEVGA GeForce GTX 780 SC ACX System Disk: Intel X25-M SSD 80GB G2 Hårddisk: 300GB WD VelociRaptor Chassi: Corsair Graphite 760T Arctic White Nätaggregat: Corsair HX 850W 80+ Ljudkort: Creative Sound Blaster X-Fi Titanium HD Operativsystem: Windows 8.1 Pro Eyefinity: 3x23" Samsung S23A700D 120Hz

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

Men fungerar Javascript om man lägger upp det på webs.com? Provade även att öppna index.html i Dreamweaver CS5.1 men det blev bara huller om buller.

Gå till inlägget

Javascript laddas ner tillsammans med din HTML. Det är alltså kod som körs på en besökares dator, till skillnad från PHP. En besökare kan välja att stänga av Javascript, men det är inte så vanligt. En besökare kan ju även välja att inte besöka din sida överhuvudtaget..

Visa signatur

Kom-pa-TI-bilitet

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

Javascript laddas ner tillsammans med din HTML. Det är alltså kod som körs på en besökares dator, till skillnad från PHP. En besökare kan välja att stänga av Javascript, men det är inte så vanligt. En besökare kan ju även välja att inte besöka din sida överhuvudtaget..

Gå till inlägget

Så det fungerar via webs.com? Kommer det blir ungefär att Java frågar om det ska startas när de går in på sidan eller kommer de bara in?

När jag gör margin-top: 230px; så blir det såhär

. Jag lyckas inte få ner den där bakgrundsbilden till menyn som är högst upp där. Några tips? EDIT: Lyckades lösa margin-top: 250px

Senast redigerat
Visa signatur

Processor: Intel Core i7 930 @ 4,01Ghz Kylning: Corsair H100i Moderkort: ASUS P6T Deluxe v2 Internminne: Corsair 12GB Grafikkort: 2xEVGA GeForce GTX 780 SC ACX System Disk: Intel X25-M SSD 80GB G2 Hårddisk: 300GB WD VelociRaptor Chassi: Corsair Graphite 760T Arctic White Nätaggregat: Corsair HX 850W 80+ Ljudkort: Creative Sound Blaster X-Fi Titanium HD Operativsystem: Windows 8.1 Pro Eyefinity: 3x23" Samsung S23A700D 120Hz

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

Så det fungerar via webs.com? Kommer det blir ungefär att Java frågar om det ska startas när de går in på sidan eller kommer de bara in?

När jag gör margin-top: 230px; så blir det såhär http://data.fuskbugg.se/skalman02/4e4527183b081_5reasons1.jpg
. Jag lyckas inte få ner den där bakgrundsbilden till menyn som är högst upp där. Några tips? EDIT: Lyckades lösa margin-top: 250px

Gå till inlägget

JavaScript och Java är _inte_ samma sak. JavaScript är ett mycket vanligt client side-srpråk på webben, det körs automatiskt när du går in på en hemsida om du inte har stängt av det själv i din webbläsare. Det finns JavaScript här på Sweclockers.

Java däremot, är ett helt annat programmeringsspråk som inte har någonting gemensamt med JavaScript förutom namnet i stort sett. Det går emellertid också att köra på webben men detta ska du inte använda dig av för det du vill göra.

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
●

Okej, innan jag frågar er så är detta guiden jag har följt: http://webbhjalp.se/anpassa-bakgrundsbild-efter-skarmupplosning/ . Men tyvärr så använder de .php , så jag antar att man behöver skriva annorlunda i slutet. Detta har de skrivit: <script src="<?php bloginfo('template_url'); ?>/js/upplosning.js" type="text/javascript"></script> . Frågan är då vad man ska skriva i en vanlig index.html fil?

Och kommer man behöva ta bort några rader från style.css om man gör detta? Isåfall vilka?

Visa signatur

Processor: Intel Core i7 930 @ 4,01Ghz Kylning: Corsair H100i Moderkort: ASUS P6T Deluxe v2 Internminne: Corsair 12GB Grafikkort: 2xEVGA GeForce GTX 780 SC ACX System Disk: Intel X25-M SSD 80GB G2 Hårddisk: 300GB WD VelociRaptor Chassi: Corsair Graphite 760T Arctic White Nätaggregat: Corsair HX 850W 80+ Ljudkort: Creative Sound Blaster X-Fi Titanium HD Operativsystem: Windows 8.1 Pro Eyefinity: 3x23" Samsung S23A700D 120Hz

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Ja, den där tutorialen är ju gjord för Wordpress så det kommer behövas en del modifikationer för att fungera med något du skrivit själv. Du kan även titta på CSS (3) media-queries för samma effekt.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Du bör nog inte försöka anpassa bilden efter webbläsaren utan helt göra på ett annat sätt. Gissar att din logga ligger i bakgrunden och att också bakgrunden till menyn ligger där eller?

Istället för att anpassa bilden så bör du använda en bild som kan repeteras och bilda ett mönster
du kan läsa mer här: http://www.w3schools.com/cssref/pr_background-repeat.asp

Sedan skall du lägga loggan i en separat box och menybakgrunden skall såklart ligga som backgrund i menyboxen

hittade en bild på datorn som borde gå att använda i alla fall i test syfte.
upphovsrätt osv ... inte en aning använd på egen risk
http://data.fuskbugg.se/skalman02/4e453f4680e3c_webtreats_met...

Visa signatur

I'm Garry-fucking-Oak, You can't ignore my girth!
__________________
Projekt CM 334 ->1337 @ H2O :: Bread-Box HTPC :: Bread-Brain NAS

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

Du bör nog inte försöka anpassa bilden efter webbläsaren utan helt göra på ett annat sätt. Gissar att din logga ligger i bakgrunden och att också bakgrunden till menyn ligger där eller?

Istället för att anpassa bilden så bör du använda en bild som kan repeteras och bilda ett mönster
du kan läsa mer här: http://www.w3schools.com/cssref/pr_background-repeat.asp

Sedan skall du lägga loggan i en separat box och menybakgrunden skall såklart ligga som backgrund i menyboxen

hittade en bild på datorn som borde gå att använda i alla fall i test syfte.
upphovsrätt osv ... inte en aning använd på egen risk
http://data.fuskbugg.se/skalman02/4e453f4680e3c_webtreats_met...

Gå till inlägget

Loggan är med i bakgrunden, dock inte bakgrunden till menyn. Är det inte svårt att få mönstret att passa? Hur ska man göra för att det ska passa ens, det är ju fortfarande olika upplösningar hos alla? Då måste jag även få bakgrunden med repeat-saken att matcha till själva loggan också.

Konstigt, detta vill ej fungera, vad är fel?

body {
margin: 0px;
margin-top: 250px;
padding: 0;
background-image: url(images/diamond.jpg);
background-repeat: repeat-y;
background-position: 30% 20%;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #464646;
}

Senast redigerat
Visa signatur

Processor: Intel Core i7 930 @ 4,01Ghz Kylning: Corsair H100i Moderkort: ASUS P6T Deluxe v2 Internminne: Corsair 12GB Grafikkort: 2xEVGA GeForce GTX 780 SC ACX System Disk: Intel X25-M SSD 80GB G2 Hårddisk: 300GB WD VelociRaptor Chassi: Corsair Graphite 760T Arctic White Nätaggregat: Corsair HX 850W 80+ Ljudkort: Creative Sound Blaster X-Fi Titanium HD Operativsystem: Windows 8.1 Pro Eyefinity: 3x23" Samsung S23A700D 120Hz

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Sitter du på Fx är det alltid bra att installera dessa tilläggen

https://addons.mozilla.org/sv-se/firefox/addon/web-developer/

https://addons.mozilla.org/sv-se/firefox/addon/firebug/

Visa signatur

▩ Monitor: ASUS Swift 27" @ 1440p/165Hz ▩ CPU: Ryzen 7700X ▩ Cooling: Corsair H170i ELITE 420mm ▩ GPU: MSI 3080 Ti SUPRIM X ▩ Memory: Corsair 32GB DDR5 Vengeance ▩ Motherboard: ASUS Crosshair X670E Hero ▩ M.2: Samsung 980 Pro ▩ PSU: Corsair HX1200 ▩ Chassi: Corsair 7000X ▩ Geekbench 6: 2903 ▩ Time Spy: 19 340

📷 Mina fotografier
👍 SweClike - Synligare färg på dina likes

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

Loggan är med i bakgrunden, dock inte bakgrunden till menyn. Är det inte svårt att få mönstret att passa? Hur ska man göra för att det ska passa ens, det är ju fortfarande olika upplösningar hos alla? Då måste jag även få bakgrunden med repeat-saken att matcha till själva loggan också.

Konstigt, detta vill ej fungera, vad är fel?

body {
margin: 0px;
margin-top: 250px;
padding: 0;
background-image: url(images/diamond.jpg);
background-repeat: repeat-y;
background-position: 30% 20%;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #464646;
}

Gå till inlägget

det funkar eftersom den repeterar en liten bild så ofta om det behövs är bilden anpassar för det så kan den bli hur stor som helst. Förutom då att det är massa små bilder som ser ut som en. Loggan skall bort från bakgrunden och in i en separat box.

body {
margin: 0px;
margin-top: 250px;
padding: 0;
background-image: url(images/diamond.jpg);
background-repeat: repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #464646;
}

testa det. Det var länge sedan som jag höll på med detta

Visa signatur

I'm Garry-fucking-Oak, You can't ignore my girth!
__________________
Projekt CM 334 ->1337 @ H2O :: Bread-Box HTPC :: Bread-Brain NAS

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag kan rekommendera W3Schools:

http://w3schools.com/

Visa signatur

5950X, 3090

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

Jag kan rekommendera W3Schools:

http://w3schools.com/

Gå till inlägget

Det är ju där jag har kollat, någon som har en aning?

Visa signatur

Processor: Intel Core i7 930 @ 4,01Ghz Kylning: Corsair H100i Moderkort: ASUS P6T Deluxe v2 Internminne: Corsair 12GB Grafikkort: 2xEVGA GeForce GTX 780 SC ACX System Disk: Intel X25-M SSD 80GB G2 Hårddisk: 300GB WD VelociRaptor Chassi: Corsair Graphite 760T Arctic White Nätaggregat: Corsair HX 850W 80+ Ljudkort: Creative Sound Blaster X-Fi Titanium HD Operativsystem: Windows 8.1 Pro Eyefinity: 3x23" Samsung S23A700D 120Hz

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

Det är ju där jag har kollat, någon som har en aning?

Gå till inlägget

funkade inte det jag skrev ?

Visa signatur

I'm Garry-fucking-Oak, You can't ignore my girth!
__________________
Projekt CM 334 ->1337 @ H2O :: Bread-Box HTPC :: Bread-Brain NAS

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

funkade inte det jag skrev ?

Gå till inlägget

Nej tyvärr, background-repeat: repeat-y; funkade ej men background-repeat: repeat; funkade.

Visa signatur

Processor: Intel Core i7 930 @ 4,01Ghz Kylning: Corsair H100i Moderkort: ASUS P6T Deluxe v2 Internminne: Corsair 12GB Grafikkort: 2xEVGA GeForce GTX 780 SC ACX System Disk: Intel X25-M SSD 80GB G2 Hårddisk: 300GB WD VelociRaptor Chassi: Corsair Graphite 760T Arctic White Nätaggregat: Corsair HX 850W 80+ Ljudkort: Creative Sound Blaster X-Fi Titanium HD Operativsystem: Windows 8.1 Pro Eyefinity: 3x23" Samsung S23A700D 120Hz

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

Nej tyvärr, background-repeat: repeat-y; funkade ej men background-repeat: repeat; funkade.

Gå till inlägget

VA det var ju det jag skrev?

Visa signatur

I'm Garry-fucking-Oak, You can't ignore my girth!
__________________
Projekt CM 334 ->1337 @ H2O :: Bread-Box HTPC :: Bread-Brain NAS

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

VA det var ju det jag skrev?

Gå till inlägget

Oj, ber så mycket om ursäkt. Såg det nu, var så ivrig att jag gick direkt på länken.

Visa signatur

Processor: Intel Core i7 930 @ 4,01Ghz Kylning: Corsair H100i Moderkort: ASUS P6T Deluxe v2 Internminne: Corsair 12GB Grafikkort: 2xEVGA GeForce GTX 780 SC ACX System Disk: Intel X25-M SSD 80GB G2 Hårddisk: 300GB WD VelociRaptor Chassi: Corsair Graphite 760T Arctic White Nätaggregat: Corsair HX 850W 80+ Ljudkort: Creative Sound Blaster X-Fi Titanium HD Operativsystem: Windows 8.1 Pro Eyefinity: 3x23" Samsung S23A700D 120Hz

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

Det är ju där jag har kollat, någon som har en aning?

Gå till inlägget

Det jag syftade på med w3schools är inte att hitta en snabb lösning på just det här problemet, utan att du har en bra möjlighet att lära dig en hel del från grunden om det allra mesta rörande html/css/javascript där.

Visa signatur

5950X, 3090

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

Det jag syftade på med w3schools är inte att hitta en snabb lösning på just det här problemet, utan att du har en bra möjlighet att lära dig en hel del från grunden om det allra mesta rörande html/css/javascript där.

Gå till inlägget

Jo det är faktiskt ett hett tipps. Det är inte svårt att programera HTML/CSS och om man kan hyffast så finns det mesta som tutorials på internet

Visa signatur

I'm Garry-fucking-Oak, You can't ignore my girth!
__________________
Projekt CM 334 ->1337 @ H2O :: Bread-Box HTPC :: Bread-Brain NAS

Redigera
Citera flera Citera
Permalänk
Medlem
●

Okej, får nog ta och göra det, tack för tipset hur som helst . Det jag undrar nu är hur jag ska få loggan att matcha bakgrunden. Här är en bild på nuvarande sidan:

Visa signatur

Processor: Intel Core i7 930 @ 4,01Ghz Kylning: Corsair H100i Moderkort: ASUS P6T Deluxe v2 Internminne: Corsair 12GB Grafikkort: 2xEVGA GeForce GTX 780 SC ACX System Disk: Intel X25-M SSD 80GB G2 Hårddisk: 300GB WD VelociRaptor Chassi: Corsair Graphite 760T Arctic White Nätaggregat: Corsair HX 850W 80+ Ljudkort: Creative Sound Blaster X-Fi Titanium HD Operativsystem: Windows 8.1 Pro Eyefinity: 3x23" Samsung S23A700D 120Hz

Redigera
Citera flera Citera
Permalänk
Medlem
●

Så nu börjar det likna något!
gör den utan bakgrund Google it för jag har ingen lösning i huvudet!

Visa signatur

I'm Garry-fucking-Oak, You can't ignore my girth!
__________________
Projekt CM 334 ->1337 @ H2O :: Bread-Box HTPC :: Bread-Brain NAS

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

Så nu börjar det likna något!
gör den utan bakgrund Google it för jag har ingen lösning i huvudet!

Gå till inlägget

Vad menar du? Ska jag ta bort bakgrunden på loggan? Något tips vad man kan googla på?

Visa signatur

Processor: Intel Core i7 930 @ 4,01Ghz Kylning: Corsair H100i Moderkort: ASUS P6T Deluxe v2 Internminne: Corsair 12GB Grafikkort: 2xEVGA GeForce GTX 780 SC ACX System Disk: Intel X25-M SSD 80GB G2 Hårddisk: 300GB WD VelociRaptor Chassi: Corsair Graphite 760T Arctic White Nätaggregat: Corsair HX 850W 80+ Ljudkort: Creative Sound Blaster X-Fi Titanium HD Operativsystem: Windows 8.1 Pro Eyefinity: 3x23" Samsung S23A700D 120Hz

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

Vad menar du? Ska jag ta bort bakgrunden på loggan? Något tips vad man kan googla på?

Gå till inlägget

JA

nu gäller det ju att vara kreativ hummm tänk tänk kanske CSS transparent background? eller motsvarande

Visa signatur

I'm Garry-fucking-Oak, You can't ignore my girth!
__________________
Projekt CM 334 ->1337 @ H2O :: Bread-Box HTPC :: Bread-Brain NAS

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Har du skapat loggan själv är det ju bara att ta bort lagret med bakgrunden (om du gjort den i ett någorlunda avancerat program och har kvar källfilen). Annars får du väl ta o göra om den. Spara i PNG med transperancy så ska du se att det funkar.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Har jobbat en del på sidan nu, och so far so good. Så här ser det ut just nu:

Nu är det lite mer design som återstår, men jag funderar även på att skapa ett forum på sidan. Frågan är hur ska det gå till? Har ni några sköna guides? Antar att man kommer behöva ge sig på Javascript för forum/loginscript, behöver man .php?

Visa signatur

Processor: Intel Core i7 930 @ 4,01Ghz Kylning: Corsair H100i Moderkort: ASUS P6T Deluxe v2 Internminne: Corsair 12GB Grafikkort: 2xEVGA GeForce GTX 780 SC ACX System Disk: Intel X25-M SSD 80GB G2 Hårddisk: 300GB WD VelociRaptor Chassi: Corsair Graphite 760T Arctic White Nätaggregat: Corsair HX 850W 80+ Ljudkort: Creative Sound Blaster X-Fi Titanium HD Operativsystem: Windows 8.1 Pro Eyefinity: 3x23" Samsung S23A700D 120Hz

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

Har jobbat en del på sidan nu, och so far so good. Så här ser det ut just nu:
http://data.fuskbugg.se/skalman02/4e466768144c8_gaming.jpg
Nu är det lite mer design som återstår, men jag funderar även på att skapa ett forum på sidan. Frågan är hur ska det gå till? Har ni några sköna guides? Antar att man kommer behöva ge sig på Javascript för forum/loginscript, behöver man .php?

Gå till inlägget

Att göra ett eget forum är rätt ordentligt avancerat. För att svara på din fråga så ja du "behöver" php eller det skulle nog vara det enklaste i alla fall.
Om du nu måste ha ett forum så skulle jag ta http://www.phpbb.com/ eller motsvarande. Har aldrig testat något färdigt forum men det skall nog inte vara allt för svårt. Sedan måste jag ännu en gång trycka på att du lär dig HTML/CSS ordentligt innan du börjar drömma om att göra forum. När du känner dig trygg där kan du gå på php och kanske senare jquery eller var du nu känner för.

Sidan blev mycket bättre med de senaste förändringarna du gjorde. Bra jobbat

Visa signatur

I'm Garry-fucking-Oak, You can't ignore my girth!
__________________
Projekt CM 334 ->1337 @ H2O :: Bread-Box HTPC :: Bread-Brain NAS

Redigera
Citera flera Citera
1 2
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara