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

question-closed Brak powtarzania tła w kierunku pionowym z lewej i prawej strony

VPS Starter Arubacloud
+1 głos
249 wizyt
pytanie zadane 16 marca 2018 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)
zamknięte 17 marca 2018 przez Krzysiek_34

Witam.

Z lewej i prawej strony chciałbym umieścić powtarzanie tła w kierunku pionowym, ale niestety brak tego tła po obu stronach. Brakuje też w środku tła w kolorze granatowym jako navy. Ścieżka do border-left i border-right podana jest prawidłowo na 100%.

<div class="image2">
	<div class="background-color_navy">
		<div class="border-left">
			<div class="border-right">
				<img src="../../obrazki/foto.png" style="position: absolute; left: 50px; top: 15px" />
			</div>
		</div>
	</div>
</div>
.image2
{
	position: absolute;
	left: 2px;
	bottom: 2px;
	width: 160px;
	height: 100px;
	outline: 2px solid #808080;
}

.background-color_navy
{
	background-color: #000080;
	width: 100%;
}

.background-color_navy .border-left
{
	background: url(../obrazki/border-left.gif) repeat-y left top;
}

.background-color_navy .border-right
{
	background: url(../obrazki/border-right.gif) repeat-y right top;
}

W środku ma być umieszczony obrazek foto.png (pomiędzy lewym i prawym powtarzaniem tego tła). Foto o rozdzielczości 64x48 wyświetla się, ale po za obszarem tego obrazka brakuje tła w kolorze navy.

Mam 2 pytania:
1. Jak zrobić, aby z lewej i prawej strony pojawiło się to powtarzające się tło?
2. Jak zrobić, aby w środku pojawiło się tło w kolorze granatowym jako navy?

Będę wdzięczny za skuteczną pomoc.

komentarz zamknięcia: Problem został rozwiązany.

1 odpowiedź

+2 głosów
odpowiedź 16 marca 2018 przez pablop76 VIP (123,060 p.)
Zacząłbym od tego, że już struktura html jest do poprawki. Elementy wewnątrz  image2 (border-left, border-right, img) powinny być obok siebie a nie wewnątrz. background-color_navy  nie potrzebne poniewaz zajmuje 100% image2 wiec dlaczego nie dać koloru granatowego dla image2 ?

Obrazki się nie pokazują bo nie maja w czym. Potrzebne wymiary ich pojemników.

Style dla img umieść w arkuszu css.
komentarz 16 marca 2018 przez Krzysiek_34 Mądrala (6,050 p.)

Zrobiłem teraz tak:

<div class="image2">
	<div class="border-left">
		<div class="border-right">
			<img src="../../obrazki/foto.png" style="position: absolute; left: 50px; top: 15px" />
		</div>
	</div>
</div>
.image2
{
	background-color: #000080;
	position: absolute;
	left: 2px;
	bottom: 2px;
	width: 160px;
	height: 100px;
	outline: 2px solid #808080;
}

.image2 .border-left
{
	background: url(../obrazki/border-left.gif) repeat-y left top;
}

.image2 .border-right
{
	background: url(../obrazki/border-right.gif) repeat-y right top;
}

Przy takim zapisie tło w kolorze granatowym pojawiło się, mniej więcej po środku jest umieszczone foto, ale nadal brak powtarzającego się tła z lewej i prawej strony. Ścieżka do border-left i border-right podana jest prawidłowo na 100%, jak coś.

Lepiej będzie tak?:

.image2
{
	background: url(../obrazki/border-left.gif) repeat-y left top;
	background: url(../obrazki/border-right.gif) repeat-y right top;
}

Przy takim wariancie wcale nie jest lepiej, bo zniknęło tło w kolorze granatowym i wyświetlił się tylko border-right. Bez sensu.

Co jest dalej nie tak?

komentarz 16 marca 2018 przez pablop76 VIP (123,060 p.)
Dalej zagnieżdżasz img w border-right i to jeszcze w border-left. Po co?
1
komentarz 16 marca 2018 przez pablop76 VIP (123,060 p.)
<div class="image2">
<div class="border-left"></div>
<div class="border-right"></div>
<img src="https://pre00.deviantart.net/a22b/th/pre/i/2015/109/c/e/blue_eye_3b_saved_as_png_to_preserve_transparency_by_shadowprince14-d8qbizi.png"/>
</div>
.image2
{
position: relative;
width: 160px;
height: 100px;
outline: 2px solid #808080;
background-color: #000080;
}
.image2:after{
  content: "";
  clear: both;
  display: table;
}
.border-left
{
width: 70px;
height: 100px;
float: left;
background-image: url(https://media.giphy.com/media/YWUpVw86AtIbe/giphy.gif);
}
.border-right
{
width: 70px;
height: 100px;
float: right;
background-image: url(https://media.giphy.com/media/YWUpVw86AtIbe/giphy.gif);
}
.image2 img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50%;
}

 

komentarz 16 marca 2018 przez Krzysiek_34 Mądrala (6,050 p.)

Tak powinno być?:

<div class="image2">
	<img src="../../obrazki/foto.png" style="position: absolute; left: 50px; top: 15px" />
</div>
.image2
{
	background: url(../obrazki/border-left.gif) repeat-y left top;
	background: url(../obrazki/border-right.gif) repeat-y right top;
	background-color: #000080;
	position: absolute;
	left: 2px;
	bottom: 2px;
	width: 160px;
	height: 100px;
	outline: 2px solid #808080;
}

Nie mam już chyba innych pomysłów.:)

Taki wariant powinien zadziałać czy jeszcze jest coś nie tak?

komentarz 16 marca 2018 przez Krzysiek_34 Mądrala (6,050 p.)
Tu widzę wiele zmian w kodzie.:)
komentarz 16 marca 2018 przez pablop76 VIP (123,060 p.)

@Krzysiek_34,

Nie możesz umieścić dwóch background w ten sposób, bo wczytany zostanie ostatni z napotkanych. Tak działa css. Możesz zrobić to w ten sposób

background: url(../obrazki/border-left.gif)  repeat-y left top , 
            url(../obrazki/border-right.gif)  repeat-y right top ;

 

komentarz 16 marca 2018 przez Krzysiek_34 Mądrala (6,050 p.)

Znalazłem sposób, aby to w jakimś sensie zadziałało. Trochę tu jest Twojej zasługi.

O to kod:

<div class="image2">
	<div class="border-left">
		<div class="border-right">
			<img src="../../obrazki/foto.png" style="position: absolute; left: 50px; top: 25px" />
		</div>
	</div>
</div>
.image2
{
	background-color: #000080;
	position: absolute;
	left: 2px;
	bottom: 2px;
	width: 160px;
	height: 100px;
	outline: 2px solid #808080;
}

.image2 .border-left
{
	background: url(../obrazki/border-left.gif) repeat-y left top;
	float: left;
	width: 100%;
	height: 100px;
}

.image2 .border-right
{
	background: url(../obrazki/border-right.gif) repeat-y right top;
	float: right;
	width: 100%;
	height: 100px;
}

Po lewej i po prawej stronie pojawiło się powtarzające się tło. Pomiędzy tymi borderami jest tło w kolorze granatowym. Mniej więcej po środku tego image2 znajduje się obrazek o nazwie foto.png.

Tło o nazwie border-left.gif oraz border-right.gif ma rozdzielczość 29x30. Chciałbym, aby te oba bordery były zmniejszone. Ich rozmiar ma być kilkakrotnie mniejszy.

Nie chce zmniejszyć rozdzielczości tych obu borderów w programie graficznym, tylko w samym kodzie.

Jak zrobić, aby zmniejszyć rozmiar border-left oraz border-right tylko w samym kodzie?

1
komentarz 17 marca 2018 przez pablop76 VIP (123,060 p.)
background-size: 33%; lub background-size: 9.7px 10px;
komentarz 17 marca 2018 przez Krzysiek_34 Mądrala (6,050 p.)

background-size: 33% ---> tło zostało 3x powiększone

background-size: 9.7px 10px ---> tło zostało 3x pomniejszone i o to mi chodziło

Dzięki za pomoc.wink

Podobne pytania

0 głosów
1 odpowiedź 498 wizyt
+1 głos
2 odpowiedzi 126 wizyt
pytanie zadane 1 czerwca 2015 w HTML i CSS przez M4tthew Gaduła (4,480 p.)
0 głosów
1 odpowiedź 1,175 wizyt
pytanie zadane 22 grudnia 2019 w HTML i CSS przez Maja2k19 Nowicjusz (150 p.)

92,453 zapytań

141,262 odpowiedzi

319,087 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!

...