Background-image - nie chce się ustawić. Opcje

[RobertGawlinski]

Witam serdecznie!

Chciałbym w moim boxie gdzie umieszczam treść na stronie umieścić w dolnym prawym rogu grafikę, aczkolwiek podczas próby używania background-image oraz background-position nie udaje mi się to.

Fragment kodu css:
http://pastebin.com/gkcXcAz6

Fragment kodu html:
http://pastebin.com/p0EZyELf


Za pomoc dziękuję i pozdrawiam!

[nospor]

.post.dolnyprawyrog
zjadles spacje

[RobertGawlinski]

Faktycznie zjadłem spacje! Jesteśmy już bliżej niż dalej (IMG:style_emoticons/default/wink.gif)

(IMG:http://i.imgur.com/uwu1F8I.jpg)

Obrazek po lewej jest z html'a <src...>
Obrazek po prawej jest z background z css'a <dolnyprawy...>

Nie mam pomysłu jak umieścić w tym boxie owy obrazem w prawym dolnym rogu. Może ktoś podsunąć pomysł?
#Zapomniałem dodać, iż po usunięciu src z html'a, owy div jest bardzo małych rozmiarów i nie widać obrazku z backgroud.

PS Jestem zachwycony, iż w ciągu 10 minut otrzymałem pomoc! Świetne forum!

Ten post edytował RobertGawlinski 6.12.2013, 12:21:02

[nospor]

http://www.w3schools.com/cssref/pr_background-position.asp

The background-position property sets the starting position of a background image.

Note: For this to work in Firefox and Opera, the background-attachment property must be set to "fixed".

ps:

PS Jestem zachwycony, iż w ciągu 10 minut otrzymałem pomoc! Świetne forum!

pomoc dostales w ciagu dwoch minut.... a to ze do tematu zajrzales pozniej to juz raczej sie liczy na twoj czas a nie na nasz. (IMG:style_emoticons/default/tongue.gif)

[!*!]

Nie mam pomysłu jak umieścić w tym boxie owy obrazem w prawym dolnym rogu. Może ktoś podsunąć pomysł?
#Zapomniałem dodać, iż po usunięciu src z html'a, owy div jest bardzo małych rozmiarów i nie widać obrazku z backgroud.

[CSS] pobierz, plaintext 
background:url('obraz.png') bottom right no-repeat;width:100px;height:100px
[CSS] pobierz, plaintext 

[RobertGawlinski]

ps:
pomoc dostales w ciagu dwoch minut.... a to ze do tematu zajrzales pozniej to juz raczej sie liczy na twoj czas a nie na nasz. (IMG:style_emoticons/default/tongue.gif)

Pardon. Rzeczywiście.

[HTML] pobierz, plaintext 
.post {
	background-image: url("tokara.png");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position:right bottom;
	overflow: hidden;
	padding: 50px 50px 30px 50px;
	margin-bottom: 40px;
	border: 1px solid #E7EBED;
	border-radius: 8px;
	background: #FFF;
 
 
}
[HTML] pobierz, plaintext 

Dodałem cztery linijki background, zgodnie z zaleceniem dla firefox'a dodałem również attachment fixed. Niestety nie działa. Debugując je w firefoxie po prostu ich nie ma. Pojawiają się gdy usunę linijkę background: #FFF; Zależy mi jednak aby było jednak te białe tło, razem z tym zdjęciem.


#REWELACJA!
Zmieniłem backbround: #FFF na background-color: #FFF; I działa! (IMG:style_emoticons/default/smile.gif) Natomiast pojawia sie kolejny problem, aby był widoczny obrazek musze usunąc background: fixed; dlaczego tak się dzieje?

Ten post edytował RobertGawlinski 6.12.2013, 12:39:35

[nospor]

Robiac background: #FFF; na koncu nadpisujesz totalnie wszystko zwiazane z BACKGROUND...

Zainteresuj sie background-color, to wowczas innych nie nadpiszesz.

[!*!]

Kolor tła umieść na samym początku. Teraz nadpisujesz całość, albo zmień na background-color.

[com]

[CSS] pobierz, plaintext 
background: #FFF url("tokara.png");
[CSS] pobierz, plaintext 

[RobertGawlinski]

Edytowałem w tym samym czasie kiedy to otrzymałem odpowiedź od użytkownika nospor, który to radził mi abym zapoznał się z poleceniem background-color.Zastosowałem je i działa. Natomiast obrazek widoczny jest tylko i wyłacznie gdy usunę komendę background-attachment: fixed. Dlaczego? Groźne to?

[!*!]

Nie, tak ma być. To nie jest Ci potrzebne, chyba że chcesz kombinować z tłem podczas przewijania strony.

Ten post edytował !*! 6.12.2013, 12:45:46

[RobertGawlinski]

Świetna robota Panowie! Nauka .CSS oraz .HTML poprzez edycje jest według mnie super zajęciem! To również dzięki wam.

Prosiłbym was o poświęcenie mi jeszcze chwili czasu gdyż mam kolejny problem (IMG:style_emoticons/default/closedeyes.gif) Sytuacja wygląda tak:

(IMG:http://i.imgur.com/jqi22Lu.png)

W obym obramowanym polu jest skrypt, który zmienia zdjęcia w stylu "slideshow" z opcją fade.
Irytuje mnie to, że używając "text-align:center;border: thick double black;ę mam na dole margines.

http://pastebin.com/YvAecBbH

.CSS jw.

Cóż poradzicie Panowie?

#Próbowałem opcją margin aczkolwiek efekt był zły, padding natomaist przynosił oczekiwane efekty aczkolwiek nie może mieć wartości ujemnych.

##Już Panowie wszystko wiem! W Javascript zmieniłem argument odpowiedzialny za wprowadzanie zdjęcia z <img src.....> na <img align="top" src....>

Ale i tak wam serdecznie dziękuję!

Ten post edytował RobertGawlinski 6.12.2013, 14:52:53

[phpion]

Wyświetlanemu obrazkowi nadaj display: block; Wówczas odstęp powinien zniknąć. Będziesz musiał jeszcze wyśrodkować obrazek w divie poprzez margin: 0px auto;