Permalänk
Medlem

Problem med bakgrund? (css)

Hej!

Jag har ett problem med att göra en bra bakgrund, och vänder mig därför till er.

I min body har jag:

background:url(y.png) repeat-x;

och y.png är en remsa som är 20px bred och 1500 px hög. Dock täcks inte hela sidan om jag scrollar ut.

Hur kan jag lösa det här? Det jag vill göra är att remsan ska töja sig y-led ifall det behövs.

Mvh

Permalänk

background-image:url('y.png');

background-repeat:repeat-x;

Visa signatur

Intel Core i7 4770k 4.4GHz | EVGA 660Ti SC | 2x4GB XMS3 1600MHz | Crucial M500 240GB | Samsung 1TB | Logitech MX518 / QPAD MK-50

Permalänk
Medlem
Skrivet av simonwellander:

background-image:url('y.png');

background-repeat:repeat-x;

Jag tror hans problem är att den inte täcker hela sidan vertikalt när han zoomar ut, bilden är "bara" 1500px hög.

Det är dock inte så mycket att göra åt förutom att göra bilden större. Men en upplösning i y-led på över 1500px är rätt ovanligt...

Permalänk
Medlem

OK, men double har löst det på ett bra sätt tycker jag: http://www.double.net/sv/

Har de en remsa med sjukt hög upplösning eller?

Permalänk
Medlem
Skrivet av csmannen:

OK, men double har löst det på ett bra sätt tycker jag: http://www.double.net/sv/

Har de en remsa med sjukt hög upplösning eller?

Om det bara är en simpel gradient du ska ha så brukar man bara sätta bakgrundsfärgen till slutet på gradienten så syns det knappt, särskilt om den är så lång. Tänkte att det var något annat eftersom den var 20px bred, var det bara en enkel gradient skulle det ju bara behövas 1px. Sen kan det kanske vara en bra idé att använda CSS3-gradients som bakgrund för webbläsarna som stödjer det, så slipper man den extra requesten till en bild.

Permalänk
Medlem

Om det bara är en gradient du ska ha rekommenderar jag CSS3, och till dom äldre webbläsarna en statisk färg alt. en bakgrundsbild. CSS3 tekniken är ny och fortfarande under utveckling, men man bör börja experimentera med den redan nu. Du slipper stora onödiga bakgrundsbilder och snabbar upp laddningstiden.

http://css3please.com/

Kolla i .box_gradient rutan, och ändra färgerna där, sedan kopiera hela blocket och släng in det i din body.

Visa signatur

Moderkort: ASUS P7P55D-E Pro, Grafikkort: Gigabyte HD6950 2GB, Processor: Intel i5 760 2,8GHz (3,6 GHz), Kylning: Noctua NH-U12P SE2, RAM: Corsair 4GB (2x2048MB) 1600MHz DDR3, Hårddisk: 1TB Samsung Spinpoint, Nätaggregat: Fractal Design Tesla 650W 80+, Chassi: Cooler Master HAF 912 Plus

Permalänk
Medlem
Skrivet av nemrod:

Om det bara är en simpel gradient du ska ha så brukar man bara sätta bakgrundsfärgen till slutet på gradienten så syns det knappt, särskilt om den är så lång. Tänkte att det var något annat eftersom den var 20px bred, var det bara en enkel gradient skulle det ju bara behövas 1px. Sen kan det kanske vara en bra idé att använda CSS3-gradients som bakgrund för webbläsarna som stödjer det, så slipper man den extra requesten till en bild.

Jo, jag min gradient kan lika gjärna var 1 px bred, så det ska jag nog ändra. Sen så undrar jag hur man kan avgöra om webbläsaren ska använda gradient-bilden som bakgrund, eller gradient-funktionen i css3. Hur funkar det?

Permalänk
Medlem
Skrivet av csmannen:

Jo, jag min gradient kan lika gjärna var 1 px bred, så det ska jag nog ändra. Sen så undrar jag hur man kan avgöra om webbläsaren ska använda gradient-bilden som bakgrund, eller gradient-funktionen i css3. Hur funkar det?

Det är bara att specificera alla så kommer den automatiskt att välja rätt, enligt den här sidan i alla fall: http://css-tricks.com/css3-gradients/

Permalänk
Medlem

Jag valde att lösa det genom att skita i css3. Jag kommer nog börja använda css3 då det är lite mer välutvecklat/inga andra lösningar finns. Nu använda jag min gradient-bild och repeterade den på x leden samt la en bakgrundsfärg som i samma färg som slutet av gradient-bilden.