Plaatjes op achtergrond langs blog?

[Mvnl]

http://popsessed.tumblr.com/

Ik wil op mijn (nu nog kale achtergrond) graag hier en daar wat plaatjes zetten.. Nu kan ik natuurlijk gewoon een hele grote achtergrondafbeelding maken waar die plaatjes al op staan, maar da's misschien nogal zwaar om elke keer te laden (nu bestaat de achtergrondafbeelding maar uit een paar pixels), dus ik zit er aan te denken om er losse pngs (vanwege transparantie) voor te gebruiken.
Nu is mijn vraag vooral wáár in mijn css-bestand ik die moet plaatsen om te zorgen dat ze meescrollen met de achtergrond, alsof ze er wel deel van zijn.
Of iig om te zorgen dat ze niet in de header/sidebar of het postgedeelte terecht komen (wellicht is het dan ook wel mooi als ze niet meescrollen)..

 

[ErikBooy007]

Je zou gewoon div's kunnen maken, met daarin je afbeelding en die met CSS positioneren:

<div id="background1"><img src="padnaarjeafbeelding" alt="achtergrond" /></div>

in je CSS:

#background1 {
  position: absolute; // scrollt mee als deel van achtergrond, verander in fixed voor niet scrollen
  top: 100px; // speel met deze
  left: 100px; // en deze waarde voor de positie. Kan overigens ook in procenten.
}

Aangezien je een gecentreerde site hebt, kan het handig zijn om bij de positionering van de afbeelding "left: 50%;" te gebruiken en dan vervolgens met margin-left verder te positioneren. Dan staat ie altijd hetzelfde ten op zichte van de rest van de pagina, ongeacht de grootte van het scherm.

 

[Mvnl]

Thanks, is er voor 'gewone' afbeeldingen nog een repeat-optie? (aangezien de lengte van de pagina afhankelijk is van het aantal posts wel handig als ik het mee laat scrollen)

 

[ErikBooy007]

Nee, voor gewone afbeelding is er geen repeat optie.

Je kunt wel de breedte en hoogte van de afbeelding als breedte en hoogte van de div opgeven in de CSS, en dan de achtergrond als achtergrond van die div instellen, in plaats van hem er als afbeelding daadwerkelijk in te zetten.

 

[Mvnl]

Als er geen repeatoptie bestaat voor gewone afbeeldingen, is er dan wel een mogelijkheid er een 'tweede achtergrond' van te maken? Of zou ik dan toch gewoon de complete achtergrond moeten veranderen in een grotere afbeelding?

 

[ErikBooy007]

Ik heb je toch net een mogelijkheid gegeven om toch te repeaten?

En twee achtergrond op het zelfde opbject kan niet.

 

[Mvnl]

O sorry, ik snap nu pas wat je bedoeld..
Nouja, helemaal begrijpen doe ik het nog niet
Welke div maak ik dan achtergrond van welke div?
En zou je dit nog wat concreter kunnen maken qua codes.. sorry dat ik zo veel vraag, maar ik heb eigenlijk gewoon amper verstand van html/css, dus het gemiddelde antwoord is voor mij vaak nog steeds een raadsel..

 

[ErikBooy007]

Kijk, je maakt een div in je body:

<div id="achtergrondafbeelding"></div>

in je CSS:

#achtergrondafbeelding {

  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -350px;
  height: 90%;
  width: 100px; // breedte van je plaatje
  background: url(padnaarjeafbeeldingrelatiefaandeplekvandezecss) repeat-y;

}

 

[Mvnl]

Nog twee vragen.
Ik heb momenteel twee achtergrond afbeeldingen waar ik tevreden over ben.

Nu zag ik gister bij een vriendin met internet explorer dat de afbeeldingen bij haar ineens óver de tekst (en het witte vlak in het midden terecht kwamen).
Ik heb geen idee waar dit aan kan liggen, maar wil wel graag een site die er op elke browser oké uitziet.

Ook heb ik ontdekt dat de afbeeldingen op een smaller scherm grotendeels wegvallen. Opzich geen ramp (ze waren vooral om de ruimte links en rechts op te vullen, dus als er geen ruimte over is hoe ik ze ook niet zo nodig te zien), maar ik wil toch even uitproberen om de afmetingen relatief te maken, zodat ze op een groter scherm ook wat groter worden..
(en eigenlijk gewoon altijd de ruimte tussen rand van de browser en start van het 'bloggedeelte' opvullen)

Hoe doe ik dat?