• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak wstawić obrazek loga zamiast imienia i nazwiska? (3 odc. kursu html)

VPS Starter Arubacloud
0 głosów
455 wizyt
pytanie zadane 1 października 2017 w HTML i CSS przez wrxxx Początkujący (310 p.)

Witam, jestem po trzecim odcinku kursu html. Chciałbym zamiast imienia i nazwiska (górze strony) by pojawiło się np. jakieś zdjęcie. Jak to zrobic?

<div class="rectangle"> 
		<div id="logo"></div>
		<div id="zegar">12:00:00</div>
		<div style="clear: both;"></div>
	</div>

To jest zapis tego całego "prostokąta".
#logo
{
	background-image:"lody-smietankowe-galka-47g.jpg";
	width: 600px;
	height: 100px;
}

A to css który zmieniałem by otrzymać w tym miejscu obrazek.

Co zmienić? W html'u coś, lub w css'ie?

1 odpowiedź

0 głosów
odpowiedź 1 października 2017 przez Chess Szeryf (76,710 p.)
wybrane 1 października 2017 przez wrxxx
 
Najlepsza
background-image:url("lody-smietankowe-galka-47g.jpg");

https://www.w3.org/TR/css3-background/#the-background-image

komentarz 1 października 2017 przez wrxxx Początkujący (310 p.)
Bez podanej wysokości i szerokości?

Dalej nie działa :/
komentarz 1 października 2017 przez Chess Szeryf (76,710 p.)

Sprawdź w pliku jakie wymiary ma Twój image i je wpisz do tego width i height. Jest jeszcze inny sposób na osadzenie obrazka na stronie. Musisz użyć do tego znacznika (tagu) <img src="lody-smietankowe-galka-47g.jpg"/> i wtedy nie będziesz musiał wpisywać nic w CSS.

komentarz 1 października 2017 przez wrxxx Początkujący (310 p.)
Z img działa :D Ale teraz jakbym chciał np wydłużyć obrazek to da się go wydłużyć przez css'a czy musiałbym np. w gimpie zmniejszyć jego szerokość?
komentarz 1 października 2017 przez Chess Szeryf (76,710 p.)
edycja 1 października 2017 przez Chess

Wpisz np.:

img { 
   width:/*unit*/;
   height:/*unit*/;
}
/* Za unit podstaw jakąś liczbę, np. 50px. */

Edit:

Dla div'a background-image:url('path.png'); też powinno zadziałać.

komentarz 1 października 2017 przez wrxxx Początkujący (310 p.)
Ale "img" nie jest scharakteryzowane jako div. Obrazek znajduje sie w divie "logo" czyli tam wkleić te unit?
komentarz 1 października 2017 przez Chess Szeryf (76,710 p.)

https://www.w3.org/TR/2011/WD-css3-values-20110906/

Jeśli chcesz tylko szerokość to napisz np.:

img{
   width:50px;
}

Analogicznie dla height. Jeśli chcesz wpisać zarówno wysokość (height) jak i szerokość (width) to nie ma problemu też możesz.

komentarz 1 października 2017 przez wrxxx Początkujący (310 p.)
Skończyło się na tym że w divie da się zmienić wysokość i szerokość i tam ustaliłem :D Ale dzięki za pomoc :D
komentarz 1 października 2017 przez wrxxx Początkujący (310 p.)
I ostatnie pytanko, żeby nie utracić jakości przy zmienianiu wymiarów obrazka wystarczy go przekonwertować na inne rozszerzenie czy coś?
komentarz 1 października 2017 przez Chess Szeryf (76,710 p.)
edycja 1 października 2017 przez Chess

https://www.w3.org/TR/css-images-4/
http://adrianbienias.pl/umieszczanie-grafiki-wektorowej-svg-w-dokumencie-html/
https://msdn.microsoft.com/pl-pl/library/kurs-html5--svg--wprowadzenie.aspx
https://www.w3.org/TR/SVG/single-page.html#struct-SVGElement
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg

Nie jestem pewien, ale zawsze po powiększeniu lub po pomniejszeniu obrazka o swoich domyślnych rozmiarach traci się jakość (jeśli chodzi o grafikę rastrową). Wydaje mi się, że aby tak nie było to musiałbyś zastosować grafikę wektorową. <svg <!-- ... -->><!-- --></svg>. Grafika rastrowa jak i wektorowa mają swoje wady i zalety; plusy, minusy.

Podobne pytania

0 głosów
4 odpowiedzi 3,139 wizyt
pytanie zadane 14 października 2016 w PHP przez ThePatrykOOO Dyskutant (8,380 p.)
0 głosów
1 odpowiedź 1,064 wizyt
0 głosów
1 odpowiedź 220 wizyt
pytanie zadane 9 lutego 2018 w PHP przez skedar Nowicjusz (150 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...