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

Question

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?

Answer 1

background-image:url("lody-smietankowe-galka-47g.jpg");

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

Comments

Bez podanej wysokości i szerokości?

Dalej nie działa :/

---

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.

---

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ść?

---

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ć.

---

Ale "img" nie jest scharakteryzowane jako div. Obrazek znajduje sie w divie "logo" czyli tam wkleić te unit?

---

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.

---

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

---

I ostatnie pytanko, żeby nie utracić jakości przy zmienianiu wymiarów obrazka wystarczy go przekonwertować na inne rozszerzenie czy coś?

---

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.