Wstawianie zdjęcia w CSS

pytanie zadane 26 sierpnia 2015 w HTML i CSS przez WoreK Początkujący (400 p.)

Witam, chciałbym wstawić obrazek (ok. 2000 x 1920 ) do CSS.

Próbowałem, już background-image, lecz to na nic nie wychodziło. Czy istnieje jakaś odpowiedź?
Robiłem coś takiego


#layout
{
    background-image: url('layout.jpg');
    background-repeat: no-repeat;
}

w tym samym miejscu wpisałem adres bezpośredni do obrazka :)

To samo :<

6 odpowiedzi

odpowiedź 26 sierpnia 2015 przez iwan9449 Pasjonat (20,810 p.)

Pierwsza wersja jak najbardziej powinna zadziałać, dodaj jeszcze wysokość i szerokość

#layout
{
    width: 2000px;
    height: 1920px;
    background: url('layout.jpg') top left no-repeat;
}

Wszystko powinno działać, oczywiście pod warunkiem, że id="layout" jest przypisane do elementu blokowego. Jeżeli nie, dodaj jeszcz display: block;

Pozdrawiam!

komentarz 26 sierpnia 2015 przez WoreK Początkujący (400 p.)

To samo się dzieje

komentarz 27 sierpnia 2015 przez iwan9449 Pasjonat (20,810 p.)

Najlepiej podeślij projekt w paczce. Ten kod powinien działać na 100%. Sprawdziłem u siebie:

CSS:

#layout {
	width: 1400px;
	height: 510px;
	background: url(img/bunner.jpg) top left no-repeat;	
}

HTML:

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Strona</title>
    <link href="style.css" type="text/css" rel="stylesheet">
  </head>
  <body>
  	    <div id="layout"></div>
 </body>
 </html>

Wszystko działa bez problemu

odpowiedź 26 sierpnia 2015 przez Comandeer Guru (600,810 p.)

odpowiedź 26 sierpnia 2015 przez jaca121212 Nałogowiec (40,760 p.)

odpowiedź 26 sierpnia 2015 przez Al Capone Obywatel (1,230 p.)

A mógłbyś pokazać kod css przodków layouta?

komentarz 26 sierpnia 2015 przez WoreK Początkujący (400 p.)

Mimo, że to jest moja pierwsza praca udostępnie cały kod CSS :> http://pastebin.com/FnGmskdW

komentarz 26 sierpnia 2015 przez DL TD Nałogowiec (36,710 p.)

CSS masz dobrze podpięty?

komentarz 26 sierpnia 2015 przez WoreK Początkujący (400 p.)

Mam dobrze, bo szare tło działa :)

odpowiedź 27 sierpnia 2015 przez Schizohatter Nałogowiec (39,600 p.)

odpowiedź 26 sierpnia 2015 przez DL TD Nałogowiec (36,710 p.)
edycja 26 sierpnia 2015 przez DL TD

Dodaj jeszcze padding ;)

#layout
{
    background-image: url('layout.jpg');
    background-repeat: no-repeat;
    padding: 100%;
}

100% to przykład daj padding taki jak rozmiary zdjęcia uwzględniając dwa parametry (wysokość i szerokość) w px np.

padding: 120px 400px;

120px odpowiada za wysokość, a 400px za szerokość :)

komentarz 26 sierpnia 2015 przez WoreK Początkujący (400 p.)

Ta sama opcja - to samo :E

komentarz 26 sierpnia 2015 przez DL TD Nałogowiec (36,710 p.)

Yyyy pamiętasz o tym aby w HTML wpisać <div id="layout"></div>

komentarz 26 sierpnia 2015 przez WoreK Początkujący (400 p.)

Tak pamiętam i to zrobiłem ;)

komentarz 26 sierpnia 2015 przez DL TD Nałogowiec (36,710 p.)

zdjęcie jest w tym samym miejscu / lokalizacji co index.html? zdjęcie ma poprawną nazwę? nie ma literówki? rozszerzenie się zgadza?

Jeśli nadal div się nie wyswietla to podeślij cały projekt w pliku np *.rar (wszystkie kody, zdjęcia itp.) może coś się blokuje wzajemnie. Albo wrzuć to na server, a my zobaczymy w kodzie co jest źle :)