CSS i inny rozmiar monitora?

Robię stronę internetową (WIP). Napotkałem kilka problemów z CSS, mam nadzieję, że możesz mi pomóc.CSS i inny rozmiar monitora?

Moja obecna sytuacja:

Mam am obrazu, pozwala nazwał go „bg.png” o szerokości około 2500px, a na środku obrazu tła ma moje logo.
Moja strona powinna kierować wszelkie mały rozmiar (od 800 x 600 do 2400 x XXX) użytkowników.

Moje problemy:

Jak scentralizować obraz tła (bg.png), tak aby logo zawsze umieszczony w wyśrodkowany (poziomo) o różnej wielkości ekranu monitorów?

Źródło

2010-06-11 studdler

Jak jesteś nowego użytkownika, należy kliknąć przycisk „Akceptuję” tick czy odpowiedź spełnia Twoje potrzeby. –

Pytanie dobrze określone przy okazji (obecna sytuacja -> problem/pożądane zachowanie). –

Powinieneś wiedzieć, że niektóre ekrany są większe niż 2500. I możesz rozwinąć coś na wielu ekranach. Zatem 2500 nie jest wystarczająco dużym ograniczeniem. – Arkh

body { background: url('bg.png') 50% 50% no-repeat; }

To będzie umieścić obraz w pełnym rozmiarze na środku strony, a użytkownik będzie zobaczyć, jak dużo tego obrazu tła, jak ich zezwoleń okno przeglądarki.

Źródło

2010-06-11 07:31:13

dzięki, to działa. Ale muszę czekać jeszcze 9 minut, aby zaakceptować odpowiedź. Dziękujemy Graphain – studdler

Witaj studdler, cieszymy się, że możesz pomóc. Warto się zarejestrować, aby móc z czasem śledzić swoje pytania i odpowiedzi oraz zachęcać innych do pomocy. –

Zauważam z podziękowaniem :) – studdler

Jeśli to był tylko plik logo można użyć

<style> 
img 
{ 
    position:absolute; 
    left:-50%; 
    top:-50%; 
    z-index:-1; 
} 
</style>

Źródło

2010-06-11 07:34:48

To nie dokładnie wyśrodkowuje obraz. Lewa część obrazu jest wyśrodkowana, ale środek obrazu nie jest wyśrodkowany. – strager

Aby to zrobić, dodaj margines lewy: -50%, margines-górny: -50%. – Sjoerd

#your_img { 
    width: 2500px; //In example 2500px 
    margin: 50%; 
    padding: -1250px; // 2500 divided by 2 
}

To prawdopodobnie nie działają w programie Internet Explorer, ale można użyć trochę siekać z position: absolute, jak wyżej

Źródło

2010-06-11 08:23:44 user170609

#your_img { 

    position: absolute; 
    left: 50%; 
    margin: -1250px; 
}

Takie rozwiązanie jest konieczne, kiedy można umieścić img elementu na innym polu. Ale bądź ostrożny - może zmienić rozmiar skrzynki rodzica.

Źródło

2010-06-11 08:26:55 user170609

CSS i inny rozmiar monitora?

Odpowiedz

Powiązane problemy