Problem z pełną szerokością w background attachment

Odpowiedz Nowy wątek
2019-08-07 12:15

Rejestracja: 3 lata temu

Ostatnio: 7 godzin temu

0

Witam serdecznie.
Mam problem z background-attachment w css. W swoim projekcie wykorzystuję Bootstrapa 3.

Mam taki kod:


background-image: url('assets/images/ob5.png');
        background-repeat: no-repeat;
        height: 100%;
        width: 100%;
        background-size: cover;
        background-attachment: fixed;
        background-position: center center;

Podgląd: http://serwer1356363.home.pl/pub/back/
(obrazek po lewej).

Chciałbym uzyskać coś takiego jak na screenie: http://serwer1356363.home.pl/pub/back/screen.jpeg
Czyli obrazem w pełnej szerokości.

Background-attachment effect: fixed - ten efekt chciałbym zachować.

W jaki sposób mogę to naprawić?

Pozostało 580 znaków

2019-08-07 13:43

Rejestracja: 2 lata temu

Ostatnio: 2 godziny temu

1

Tak:

<!DOCTYPE html>
<html>
<head>
  <title>tytul</title>
<style>
#obrazek {
  width: 30%;  
  float:left;
  padding-right:10px;
  padding-bottom:10px;
 }
</style>
</head>
<body>

<img src="ob5.png" id="obrazek">

Abcdef ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm.
Abcdef ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm.
Abcdef ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm.
Abcdef ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm.
Abcdef ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm.
Abcdef ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm.
Abcdef ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm.

</body>
</html>

Pozostało 580 znaków

2019-08-07 13:55

Rejestracja: 3 lata temu

Ostatnio: 7 godzin temu

0

dzięki za odpowiedź. Tak niestety nie może być - chce ten obrazek mieć jako tło boczne (na lewo od containera)

Znaczy chcesz móc do tego DIV-a z obrazkiem coś wpisywać? Moment... - Freja Draco 2019-08-07 13:58
dokładnie :) zaktualizowałem plik na podglądzie. Teraz jest prawie ok - tylko obrazek miałby być wyrównany do prawej strony (jest do lewej). W jaki sposób to zrobić? :) - lukmopy 2019-08-07 13:59

Pozostało 580 znaków

2019-08-07 14:23

Rejestracja: 2 lata temu

Ostatnio: 2 godziny temu

1

Coś takiego?

<!DOCTYPE html>
<html>
<head>
  <title>tytul</title>
<style>
#obrazek {
  background-image: url('ob5.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size:30%;

  width: 30%;
  float:left;
  margin-right:10px;
  margin-bottom:10px;
 }
</style>
</head>
<body>

<div id="obrazek">
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890.
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890.
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890.
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890.
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890.
</div>

Abcdef ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm.
Abcdef ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm.
Abcdef ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm.
Abcdef ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm.
Abcdef ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm.
Abcdef ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm.
Abcdef ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm  ghjklm.

</body>
</html>

edytowany 1x, ostatnio: Freja Draco, 2019-08-07 14:24

Pozostało 580 znaków

Odpowiedz

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0