Zaloguj się

grevious · 16-11-2009, 00:56

Witam!
Mam spory problem, jak rozciągnąć obrazek ta przy pomocy CSS?

virus4 · 16-11-2009, 01:00

Może więcej szczegółów. Domyślam się, że chodzi Ci o coś takiego:

Kod:
<div id="obrazek">

<img src="ścieżka do obrazka" alt="opis obrazka gdy się nie wyświetli"/>

</div>

i w CSS

Kod:
#obrazek {

width: szerokość w %;

height: wysokość w %;

}

Tylko wtedy to ten obrazek straci na jakości.

grevious · (Ten post był ostatnio modyfikowany: 16-11-2009, 01:35 przez grevious.)

wiesz, mam tło gradientowe z generatora http://tools.dynamicdrive.com/gradient/, i chce to jakoś dobrze rozciągnąc ale tak, żeby na monitorach różnej rozdzielczości wygłądało dobrze, spróbuję tego co mi pokazałeś

Nie wiem co robie źle?

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl"> 

<head>

    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=windows-1250" />

    <title>Konkurs plastyczny</title>

    <link rel="stylesheet" type="text/css" href="style3.css" />

    <link rel="Shortcut icon" href="ikonka.bmp" />

</head>

<body>

        <div id="obrazek">

        <img src="gradient.php.jpg" alt="opis obrazka gdy się nie wyświetli"/>

        </div>

</body>

Kod:
#obrazek {

width: 100%;

height: 100%;

}

virus4 · 16-11-2009, 01:44

Od kiedy obrazki mają najpierw rozszerzenie PHP a potem JPG? Po drugie po co korzystasz z jakichś głupich internetowych edytorów? Nie lepiej ściągnąć GIMP'a i w nim zrobić obrazek przy użyciu narzędzia "Gradient"?
Po za tym przyszedł mi do głowy inny sposób (tylko wtedy kiedy obrazek może się powtarzać tzn. nie ma na sobie jakichś głupich wzorków itd.) Możesz zrobić coś takiego tylko przy użyciu CSS.

Kod:
<div id="obrazek">

jakiś tekst, który ma się znaleźć w tym divie

</div>

i teraz CSS

Kod:
#obrazek {

background: url(ścieżka do obrazka, który ma być tłem) rodzaj powtarzania;

}

Za "rodzaj powtarzania podstawiasz"
a) repeat-x (powtarzanie w poziomie)
b) repeat-y (powtarzanie w pionie)
c) repeat (powtarzanie i w poziomie i w pionie)

Można jeszcze zrobić tak, że robisz obrazek o średniej wysokości Twojej strony (załóżmy 1000px) i dajesz w CSS

Kod:
#obrazek {

background: ostatni kolor z gradientu url(ściezka do obrazka gradientu) repeat-x;

grevious · 16-11-2009, 01:50

Tak, tylko że on ma miec wzorek, na to to ja już dawno wpadłem.

virus4 · 16-11-2009, 02:07

No to zamiast "gradient.php.jpg" powinny być "gradient.jpg" co nie?

grevious · (Ten post był ostatnio modyfikowany: 16-11-2009, 03:24 przez KowR.)

zmieniłem to ale nie to sprawiło że jest OK, wydłużyłem cienki kawałek grafiki i powtórzyłem w poziomie Smile

zawsze jest jakieś wyjście, trzeba tylko je znaleźć

// rodi
Ehhh... Ludzie... Najpierw zainwestujcie w słowniki!

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie