Som besökare på Hamsterpaj samtycker du till användandet av s.k. cookies för att förbättra din upplevelse hos oss. Jag förstår, ta bort denna ruta!
Annons

Css backgrund rest?

Skapad av MER, 2011-06-05 16:35 i Webbutveckling & Programmering

1 721
12 inlägg
0 poäng
MER
Visningsbild
P 33 Mölndal Hjälte 3 305 inlägg
2011-06-05 16:35
0
Jag har ett litet CSS-problem. Min sida har ett yttre bakgrundsmönster, som upprepas över hela sidan och i mitten ett inre mönster i en div, som har bestämd bredd men varierande längd. Dessa kan jag passa ihop utan problem, och övergången ordnas lätt i sidorna eftersom det är likadant överallt, men överkanten och underkanten har jag som två separata bilder. Överkanten har jag passat in, men eftersom längden på min div varierar passar inte nederkanten in hela tiden.

Vad jag vill är alltså att nederkanten kommer först när en y-upprepad bakgrundsbild i min div tar slut. Eller att längden ska gå i steg för att alltid passa precis in - jag vill inte att en bakgrundsbild ska brytas på mitten. Finns det nån lösning på detta mån tro? Är det någon som över huvud taget förstår vad jag vill åt?
Direktlänk Svara på inlägg Gästbok
Skicka

Är reklamen ivägen? Logga in eller registrera dig så försvinner den!

Tvillingen
Visningsbild
P 31 Hjälte 3 117 inlägg
2011-06-07 12:28
0
Jag är tveksam på om det här går att lösa med endast CSS utan du behöver nog lite javascript också.

Säg att bilden behöver 10px i y-led per upprepning då är det bara att kontrollera längden på diven och är den 672px avrundar du upp till 680px.

Det här borde fungera och jag har använt mig av jQuery.
Ett stycke javascript-kod:
$(document).ready(function () {
 var imageHeight = 12; //Antalet pixlar per repetition
 var divHeight = $('#content').innerHeight(); //Höjden på diven

 if((imageHeight % divHeight) != 0) //Kontrollerar om man behöver ändra höjden
 {
  divHeight = divHeight - (divHeight % imageHeight) + imageHeight; //räknar ut den nya höjden
 }
 $('#content').css('height', divHeight + 'px'); //ger diven den nya höjden
});


Ifall kodrutan är elak har du koden här också.
http://pastebin.com/fJMtvpjb

Jag är ond!

Direktlänk Svara på inlägg Gästbok
Skicka
pr0n
Visningsbild
P Hjälte 5 588 inlägg
2011-06-07 13:40
0

Svar till MER [Gå till post]:
Nu fattade jag faktiskt inte riktigt vad du ville göra.. men antingen kan du försöka leka runt lite med background-position, annars tror jag att det blir enklast för dig att ändra om ditt upplägg på sidan :/ för har jag förstått dig rätt så låter inte det som en speciellt svår sak att göra om man gjorde upplägget rätt.

Ingen status

Direktlänk Svara på inlägg Gästbok
Skicka
MER
Visningsbild
P 33 Mölndal Hjälte 3 305 inlägg
Trådskapare
2011-06-07 15:58
0
Svar till Tvillingen [Gå till post]:
Ser riktigt bra ut. Javascript är inte min allra starkaste sida, så jag får be om lite hjälp att applicera koden bara. Är det divens id/namn eller class jag använder när jag refererar till den? Och hur skriver jag då? Ska det ersätta ('#content') då - hur ska det skrivas?

Här är koden med min modifikation, med reservation för att jag hänvisar fel i den (mur är alltså min class):
Ett stycke Javascript-kod:

$(document).ready(
 function () {
  //Antalet pixlar per repetition
  var imageHeight = 70;
 
  //Höjden på diven
  var divHeight = $(huvudruta).innerHeight();
 
  //Kontrollerar om man behöver ändra höjden
  if((imageHeight % divHeight) != 0){
   //räknar ut den nya höjden
   divHeight = divHeight - (divHeight % imageHeight) + imageHeight;
  }
  //ger diven den nya höjden
  $('#mur').css('height', divHeight + 70);
 }
);

Men jag får inte omställningen av höjden att fungera. När jag bara skriver in t ex
$('#mur').css('height', '500');
händer inget - hur bör jag skriva?

Svar till pr0n [Gå till post]:
Det är lite svårt att förklara, jag borde egentligen lägga upp den och visa istället, men Tvillingen verkar förstå. Det finns en liknande grej på blocket.se, där alla sidor har den "vidare ståltråden" i vänsterkanten. Nu skiter blocket i att bilden kan brytas mitt i av att sidan tar slut, men jag vill alltså motsvarande få med ett jämnt antal varv i ståltråden.
Direktlänk Svara på inlägg Gästbok
Skicka
Tvillingen
Visningsbild
P 31 Hjälte 3 117 inlägg
2011-06-07 16:42
0
Svar till MER [Gå till post]:
Är mur en class måste du ändra lite i koden. Sedan hade du tagit bort divHeight + 'px' och bytt ut px till 70. Det ska stå px där då det är CSS (:

Har du inkluderat jQuery föresten?

Här är koden igen fast lite modifierad.
Ett stycke javascript-kod:
$(document).ready(function () {
  //Antalet pixlar per repetition
  var imageHeight = 70;
 
  //Höjden på diven
  var divHeight = $('.mur').innerHeight();
 
  //Kontrollerar om man behöver ändra höjden
  if((imageHeight % divHeight) != 0){
   //räknar ut den nya höjden
   divHeight = divHeight - (divHeight % imageHeight) + imageHeight;
  }
  //ger diven den nya höjden
  $('.mur').css('height', divHeight + 'px');
 }
);




Jag är ond!

Direktlänk Svara på inlägg Gästbok
Skicka
MER
Visningsbild
P 33 Mölndal Hjälte 3 305 inlägg
Trådskapare
2011-06-07 17:31
0
Svar till Tvillingen [Gå till post]:
Ahh, missförstod dig - allt blir så självklart nu när man ser det :)
Jag har inkluderat jquery, men kanske gjort fel då det inte riktigt funkar än...
Jag inkluderade alltså med följande tag före den aktuella script-taggen (fick byta till hakparanteser här):
[script type="text/javascript" src="jquery.js"][/script]

Jag testade också med bara
$('.mur').css('height', '1000' + 'px');
men inget gav något utslag.
Direktlänk Svara på inlägg Gästbok
Skicka
Tvillingen
Visningsbild
P 31 Hjälte 3 117 inlägg
2011-06-08 12:47
0

Svar till MER [Gå till post]:
Det borde fungera, men är du helt säker på att "mur" är en class och inte ett id? Är det id ska du använda dig av $('#mur')

Jag är ond!

Direktlänk Svara på inlägg Gästbok
Skicka
MER
Visningsbild
P 33 Mölndal Hjälte 3 305 inlägg
Trådskapare
2011-06-08 15:46
0
Svar till Tvillingen [Gå till post]:
Det är en class, men jag har försökt med id också...

Känns som jag testat de flesta varianter på det nu, så verkar som jag missat nåt grundläggande. Här är iaf skiten, du får gärna testa lite med firebug eller liknande på den, om du vill... :)

http://munkis.se/utveckling/3.0
Direktlänk Svara på inlägg Gästbok
Skicka
Tvillingen
Visningsbild
P 31 Hjälte 3 117 inlägg
2011-06-08 17:56
0

Svar till MER [Gå till post]:
Fick error på din sida att jQuery inte fungerade. Testa byt ut jquery.js med den här länken (:

https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

Jag är ond!

Direktlänk Svara på inlägg Gästbok
Skicka
MER
Visningsbild
P 33 Mölndal Hjälte 3 305 inlägg
Trådskapare
2011-06-09 00:23
0
Svar till Tvillingen [Gå till post]:
Nemen ser man på, det funkade ju. Visste väl att nåt hade blivit fel med den, även om jag inte kan begripa vad. Resten löser jag iaf, tack så mycket för hjälpen! =)

En helt annan sak jag kom på dock - du råkar inte veta hur man får opacity på bakgrundsfärgen men inte på texten. Om du ser på sidan så blir texten också genomskinlig, vilket inte är önskvärt...
Direktlänk Svara på inlägg Gästbok
Skicka
Tvillingen
Visningsbild
P 31 Hjälte 3 117 inlägg
2011-06-09 11:48
0
Svar till MER [Gå till post]:
Härligt att det fungerar (:

Du kan alltid använda dig av en bild som är delvis transparent, men CSS3 tror jag också ska klara av det.

Här hittade jag lite lösningar till det.
http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text

Jag är ond!

Direktlänk Svara på inlägg Gästbok
Skicka
MER
Visningsbild
P 33 Mölndal Hjälte 3 305 inlägg
Trådskapare
2011-06-09 11:59
0
Svar till Tvillingen [Gå till post]:
Perfekt, tack än en gång! =)
Direktlänk Svara på inlägg Gästbok
Skicka

Forum » Datorer & IT » Webbutveckling & Programmering » Css backgrund rest?

Ansvariga ordningsvakter:

Användare som läser i den här tråden just nu

1 utloggad

Skriv ett nytt inlägg

Hej! Innan du skriver om ett potentiellt problem så vill vi påminna dig om att du faktiskt inte är ensam. Du är inte onormal och världen kommer inte att gå under, vi lovar! Så slappna av och gilla livet i några minuter - känns det fortfarande hemskt? Skriv gärna ner dina tankar och frågor, vi älskar att hjälpa just dig!

Den här tråden är äldre än Rojks drömtjej!

Det senaste inlägget i den här tråden skrevs för över tre månader sedan. Är du säker på att du vill återuppliva diskussionen? Har du något vettigt att tillföra eller passar din fråga i en ny tråd? Onödiga återupplivningar kommer att låsas så tänk efter en extra gång!

Rubrik

Inlägg

Fet Kursiv Spoiler Bild Film Kod Undersökning

Förhandsgranska Spara

Hjälp

Det här är en hjälpruta

Här får du korta tips och förklaringar om forumet. Välj kapitel i rullningslisten här ovanför.

Rutan uppdateras automagiskt

När du använder funktioner i forumet så visas bra tips här.


Annons
Annons
Annons
Annons