Pozycjonowanie tekstu na obrazku

pytanie zadane 12 lipca 2017 w Rozwój zawodowy, nauka, praca przez cinek4 Nowicjusz (180 p.)

Cześć

probuje zakodowac ten szablon http://www.graphicsfuel.com/2017/05/imperial-psd-website-template/

i mam problem z pozycjonowaniem tekstu na obrazkach.

Powiedzmy ze chodzi o sekcje z video oto moj kod:

<section class="video">
        <p>Get a sneek Peek of <br>
            What we do in 60 seconds</p>
 </section>

.video{
    background: url(img/Layer%2018.png) no-repeat center;
    min-height: 800px;
    min-width: 100%;
    position: relative;
}

.video p {
    font-size: 50px;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 200px;
    left: 250px;
}

Przy 100% na przegladarce wszystko jest ok jak zaczne pomniejszac strone tekst z obrazkiem sie rozjezdza.

Jakies sugestie jak powinno to byc zakodowane ?

Z gory dzieki !

2 odpowiedzi

odpowiedź 12 lipca 2017 przez piotrsz109 Stary wyjadacz (13,730 p.)

Używasz left: 150px co powoduje iż nie jest to wyśrodkowane. Powinieneś zastosować left: x% to powinno spowodować że będzie bez przerwy ok. Tak samo zrób z top

komentarz 13 lipca 2017 przez cinek4 Nowicjusz (180 p.)
edycja 13 lipca 2017 przez cinek4

Zastosowalem sie do Twoich porad i problem troche sie zminimalizował ale nadal pozostał

Tak wyglada przy 100%

http://imagehost.imgcave.com/2017/07/13/Beztytulu.jpg

A tak przy 0%

http://imagehost.imgcave.com/2017/07/13/Beztytul2u.jpg

Czy tutaj chodzi poprostu o wielkosc czcionki i przez to sie przesuwa ten napis przy oddalaniu ?

Jakies propozycje rozwiązania ?

Z góry dzieki !

odpowiedź 13 lipca 2017 przez Cyborek Użytkownik (850 p.)

<section class="video">
        <p>Get a sneek Peek of <br>
            What we do in 60 seconds</p>
 </section>

.video{
    display: flex;
    justify-content: center;
    background: red;
    min-height: 800px;
    min-width: 100%;
    position: relative;
}
 
.video p {
    font-size: 50px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 150px;
}

Spróbuj użyć tego. Nie miałem zdjęcia, więc ustawiłem tło na czerwone.