Reponsive background problem

Hi Guys,

Ik ben bezig met een website waar ik op de begin pagina een foto over het hele scherm trek en hier vervolgens een tekstje inzet.

Het over het hele scherm trekken is het probleem niet, alleen nu ik verder wil gaan eronder (andere div) gaat die verder waar de tekst in de vorige gebleven is achter de foto en niet er onder.

Wat kan ik doen zodat hij onder de foto verder gaat?

Mijn code voor de foto over de achtergrond:

Codeblok (voorbeeld.php):

1
2
3
4
5
6
7
8
9
10
11
12
13
14

section.home{
background:url(../img/back.png) no-repeat;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
background-attachment: fixed;
background-position:top center!important;
position: absolute;
bottom: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}

alvast bedankt, als er meerdere codes nodig zijn hoor ik het wel.

Patrick

Mag ik een voorbeeldje?
Met wat ik er nu van begrijp kan je misschien de tekst een margin-top geven zodat hij onder het plaatje komt te staan?

Stefvdwel schreef:

Mag ik een voorbeeldje?
Met wat ik er nu van begrijp kan je misschien de tekst een margin-top geven zodat hij onder het plaatje komt te staan?

Die margin zou ik hem kunnen mee geven, maar dan is hij niet gelijk op alle apparaten.

Heb je live voorbeeld of afbeeldingen om het wat duidelijker te maken?

Milan schreef:

Heb je live voorbeeld of afbeeldingen om het wat duidelijker te maken?

Nee, geen live voorbeeld en op de afbeelding is niks te zien.

Ik zal het even goed proberen uit te leggen met een ander voorbeeld.

Ik heb zoals deze website, maar dan een foto ipv gifje, bovenaan een foto over het hele scherm gevolgd met daaronder content.

Echter ik heb de foto nu wel over het hele scherm, maar als ik het content wil neerzetten gaat dat achter de foto zitten ipv er onder.

Volgens mij heeft hij de background van de body op die trein/metro, en dan de header (naam) op height: 100%;

Hij heeft een div gemaakt met als achtergrond dat gifje. Daar overheen heeft hij een doorzichtige div geplaatst, en daar hoeft hij dan de tekst in gezet.
Bron:
view-source:http://www.pascalvangemert.nl/
http://www.pascalvangemert.nl/view/style.css

@Milan, ik kan hem wel in de body zetten, maar dan zit ik nog steeds met het probleem dat de tekst terug loopt ipv buiten het eerste scherm valt zeg maar.

@Stef, het plaatsen ervan lukt, alleen het content wat eronder komt sluit niet aan onder de foto maar erachter.

height: 100% voor die bovenste div?

Nope.

Plaats een wat meer code.

À‰én
is toch niet zo erg?

Milan schreef:

Plaats een wat meer code.

Het is inmiddels gelukt door wat te spelen met de padding.

Stefvdwel schreef:

À‰én
is toch niet zo erg?

wel,
minder.

Patricka schreef:

Eerdere citaten tonen

Milan schreef:

Plaats een wat meer code.

Het is inmiddels gelukt door wat te spelen met de padding.

Eerdere citaten tonen

Stefvdwel schreef:

À‰én
is toch niet zo erg?

wel,
minder.

Mobiel