Span z tłem + h1 obok

Question

Witam Wszystkich,

 

Chce zrobić obrazek z nagłówkiem po prawej. Nie mam pojęcia jaki robię błąd, że nie wyświetla mi obrazka (jako tła span). Ścieżkę obrazka testowałem z <img src.....> - działa 

<h1 class="h1-produkty"> <span>PRODUKTY</span> </h1> 

<style>

.h1-produkty {
    text-align: center;
    padding:30px 0;
    border-bottom: 2px dotted #204d74;
    color: #FFF;
}
.h1-produkty span {
    background: url("img/branze.png") no-repeat 0 0;
    padding: 0 0 0 100px;
    height: inherit;
    width: inherit;
}
</style>

 

Comments

Musisz podać bezwzględne wymiary obrazka dla niego, np.: width:100px; height:100px, a nie, że ty podajesz inherit. W src przeglądarka automatycznie pobiera wymiary, a po użyciu background nie pobiera wymiarów tylko czeka, aż ktoś je poda, bo inaczej nie wyświetli go. Teraz wyświetla kawałek image, bo podałeś padding.

 

http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image

http://stackoverflow.com/questions/3967344/background-image-in-img-element

---

Próbowałem już z wymiarami, obrazek ma 87x75px. dodałem height: 100px; width:300px; i nic nie pomogło. 

 

.h1-produkty {
    text-align: center;
    padding:30px 0;
    border-bottom: 5px dotted #FFF;
    color: #FFF;
}
.h1-produkty span {
    background: url("img/branze.png") no-repeat 0 0;
    padding: 0 0 0 200px;
    display: inline-block;
    height: 100px;
    width: 300px;
    
   
}

 

---

A czy mógłbyś swoją wizję udostępnić tutaj w postaci obrazka .jpg lub .png?

Narysuj w paint'cie o co ci dokładniej chodzi. Narysuj schemat i wrzuć. Wtedy będziemy wiedzieli, co autor ma na myśli.

---

Wygląd docelowy

Answer 1

A nie można by jakoś tak?

.title-container div {
    display: inline-block;
    vertical-align: middle;
}

<div class="title-container">
    <div class="logo"><img src="img/branze.png" /></div>
    <div class="title"><h1>BRANŻE</h1></div>
</div>

 

Answer 2

<div style="background:red;height:100px">

<div style="background:url('obraz.png');width:500px;height:115px;margin-left:auto;margin-right:auto"></div>

</div>

lub

<style>
	.content{
		background:orange;
		width:100px;
		height:100px;
		margin-left:auto;
		margin-right:auto;
	}
	.content:after{ 
		content:'BRANŻE';
		padding-left:110px;
	}
		
</style>


<div style="background:red;height:100px">

<div class="content"></div>

</div>

 

Comments

Jaka jest pełna ściezka w przypadku katalogów z obrazkiemi w Neatbeans? Przez to może być ten błąd, robiłem na sucho w notepad++ i wyszło.

---

Odsyłam do podstaw:

http://www.kurshtml.edu.pl/html/wstawienie_obrazka,zielony.html

---

bez zmian.

---

Nie wiem jak to wytłumaczyć, ale znalazłem bład - pewnie jest gdzie jeszcze dodatkowy, bo tak być nie powinno. Obrazek jako tło działa w pliku html tylko, co najlepsze wszystkie inne parametry przeniosłem do css i działają poza :

background:url("img/branze.png");

background-repeat: no-repeat;