CSS - bakgrund (anpassa sig efter skärmupplösningen)

Permalänk
Medlem

CSS - bakgrund (anpassa sig efter skärmupplösningen)

Tjenare, sitter och kodar lite i css och har ett problem..
Vill fixa så att bakgrunden jag satt in anpassar sig efter skärmupplösningen, dvs att man ska se hela bilden oavsett om man har 2000x2000 eller 1000x1000.
Någon vänlig som kan hjälpa mig lite?

Visa signatur

MOTHERBOARD: GIGABYTE B450 AORUS PRO CPU: AMD Ryzen 5 3600 4.2GHz GPU: MSI GeForce GTX 1060 3GB PSU: Fractal Design Integra R2 500W 80+ Bronze CHASSI: NZXT H440 RAM: CORSAIR Vengeance LPX Black 2666MHz SSD1: Samsung 850-Series 250GB SSD2: Samsung 840-Series 250GB HDD: Samsung 1TB OS: Windows 10 Pro MONITOR1: AOC G2460PQU TN 144Hz 24" MONITOR2: DELL UltraSharp U2311H 23"

Permalänk
Medlem

Har du provat sätta till auto?

Visa signatur

Corsair 16GB (4x4096MB) CL9 1600Mhz | Asus P8Z77-V PRO |
Samsung SSD Basic 830-Series 256GB | Intel Core i7 3770K 3,5Ghz |
Asus Xonar Essence STX | Noctua NH-U9B SE2 | Antec Performance One P280 | Corsair HX 850W 80+ Gold Modulär | MSI GTX 770

Permalänk
Medlem
Skrivet av knype:

Tjenare, sitter och kodar lite i css och har ett problem..
Vill fixa så att bakgrunden jag satt in anpassar sig efter skärmupplösningen, dvs att man ska se hela bilden oavsett om man har 2000x2000 eller 1000x1000.
Någon vänlig som kan hjälpa mig lite?

Vilket sammanträffande, satt å googlade det här igår....
http://egilhansen.com/2011/10/22/get-background-image-resize-...
http://paulmason.name/item/full-screen-background-image-pure-...
http://css-tricks.com/perfect-full-page-background-image/
De här verkade vara de mest användbara tipsen. Jag använde mig av det första och det fungerar utmärkt.

Visa signatur
Permalänk
Entusiast

Jag kör med detta på min site (som inte är så mycket till site än men du kommer se hur bakgrunden fungerar när du drar i fönstret)

body{ margin:0; padding:0; background-image: url(../images/parquet.jpg); background-repeat:no-repeat; background-position:center center; background-attachment:fixed; -o-background-size: 100% 100%, auto; -moz-background-size: 100% 100%, auto; -webkit-background-size: 100% 100%, auto; background-size: 100% 100%, auto; }

Nackdelen med denna metoden är att bilden streachas, så det gäller att välja bakgrund väl

Permalänk
Medlem

Är det så här du menar kanske? http://jsfiddle.net/T2gSx/

Visa signatur

| i7 920 | UD5 | 6GB | 3TB | Intel SSD 80GB | Antec P182 |
http://webbutveckla.nu - Blogg om webbutveckling