Forum PHP.pl > HTML/CSS rozciągnięcie obrazka

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: HTML/CSS rozciągnięcie obrazka

Forum PHP.pl > Forum > Po stronie przeglądarki

Jamjest

31.07.2010, 14:14:09

Siema .
Chciał bym abyś cie mi pomogli zrobić z takiego obrazka:

Na takie coś:

Damonsson

31.07.2010, 14:28:29

No przecież sam sobie już rozciągnąłeś

Jamjest

31.07.2010, 14:30:38

Ten 2 Screen to z innej strony

Damonsson

31.07.2010, 14:41:46

[HTML] pobierz, plaintext 
<body style="margin:0px; padding:0px;"> 
<img src="http://img401.imageshack.us/img401/3264/headersq.png" style="width:100%; height:117px;" /> 
<div style="position:absolute; top:0px; left:0px; width:100%; height:117px;"> 
Lorem ipsum <br />
Lorem ipsum <br />
Lorem ipsum <br />
Lorem ipsum <br />
Lorem ipsum <br />
Lorem ipsum <br />
Lorem ipsum <br />
Lorem ipsum <br />
</div> 
</body>
[HTML] pobierz, plaintext

możesz dodać overflow: hidden do diva, jakby Ci się spodobało miejsce i byś przesadził z tekstem, grafiką czy co tam chcesz mieć

Jamjest

31.07.2010, 14:46:40

Doskonale .
Ale chyba lepiej by było w css wiec jeśli można to proszę to samo tylko w css
Dzięki

Damonsson

31.07.2010, 14:48:30

No to masz zagadkę na resztę dnia, jak rozdzielić to na:

- CSS
- HTML

Jamjest

31.07.2010, 14:51:30

Cytat(Damonsson @ 31.07.2010, 15:48:30 )

No to masz zagadkę na resztę dnia, jak rozdzielić to na:

- CSS
- HTML

Ok i tak już pomogłeś wiec spróbuje sam to wykombinować dzięki

Edit
Niby wszystko zrobiłem ok ale... a sami zobaczcie:

To mam w css

[HTML] pobierz, plaintext 
#logo {
	background-image: url(images/header.png);
	width: 100%;
	height: 171px;
	position: absolute;
	padding: 0px;
	margin: 0px;
	top: 0px;
	left: 0px;
}
[HTML] pobierz, plaintext

bmL

3.08.2010, 02:46:02

A co zrobiłeś z

Kod

tak sobie skasowałeś drogi Kolego:)?
Trzeba wyrzucić tło z diva i wstawić "pod nim" zdjęcie.

thek

3.08.2010, 08:38:56

Lepiej zobacz, czy to co dajesz jako obraz tła można w css rozciągnąć, czy może powinien to być jednak normalny element img z src, ale z odpowiednimi opcjami ustawionymi...

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.