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

Odpowiedz Nowy wątek
2019-08-07 12:15
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
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
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
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
Liczba odpowiedzi na stronę

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