Jak usunąć boczne marginesy w CSS?

pytanie zadane 5 grudnia 2015 w HTML i CSS przez BlackCat_ Początkujący (310 p.)
edycja 5 grudnia 2015 przez BlackCat_

Witam, jestem totalnie początkującą osobą.. zaczełam "zabawę" z htmlm i css ,ale na wstępie od razu górka.. nie mam pojęcia jak to zmienić i co źle robię :) próbowałam już przeróżnych sposobów ,ale po całym dniu męczarni pozostało mi jedynie poprosić Was o pomoc :)

Tak więc problem polega na tym ,że obrazek jaki chciałam ustawić w css na tło całej strony ciągle ma z boków dwa marginesy.. góra i dół mi się ładnie złączyły, a tych bocznych nie mogę się pozbyć..

To html ( w wykropkowane elementy na razie nie wstawiłam dokładnych informacji, ale nie powinno to przeszkadzać ). Jeżeli zdjecie jest za małe to tu jest w screenie http://scr.hu/1x21/0wuo5 to samo.

<! DOCTYPE HTML>
<html lang="pl">
<head>

 <meta charset="utf-8">
 <title>....</title>
 <meta name="description" content="....." />
 <meta name="keywords" content="....., ...., ....,  " />
 <meta http-equiv="X-UA-Comptible" content="IE=edge,chrome=1" />
 <link rel="stylesheet" href="style.css" type="text/css" />
 
  
  
 </head>
 
 <body>
 


 </body>
 
 </html>

To css:

Jeżeli zdjecie jest za małe to tu jest w screenie http://scr.hu/1x21/6xnpt to samo.

body
{
    background-image: url("http://i907.photobucket.com/albums/ac278/skmmz111555/1MYSTERIOUSCHIMERA/jpg_zpswttz5p6e.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: scroll; 
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;

}

Jak wpisuję background-color np. czerwony to bez problemu pojawia się on na całej stronie.. a jak zmieniem na obrazek od razu wyskakują te boczne paski jak tu (po paskach od mozilli można zobaczyć rozmiar marginesów):

Z góry dziękuję za pomoc :)

2 odpowiedzi

odpowiedź 5 grudnia 2015 przez Filip31411 Dyskutant (8,820 p.)
wybrane 5 grudnia 2015 przez BlackCat_

Najlepsza

Te "marginesy" są spowodowane tym, że zdjęcie, które masz ma mniejszą szerokość niż strona. Jedynym sposobem na dopasowanie go na szerokość całej strony jest rozciągnięcie zdjęcia co może sprawic, że nie będzie ono ostre. Przyjrzyj się plikom jpg teł ze stony: http://subtlepatterns.com/. Podepnij sobie wybrane tło bez tego "background-repeat: no-repeat;", a zobaczysz, że te zdjęcia są tak skonstruowane, że wiele takich samych zdjęć ułożonych obok siebie tworzą jednolitą strukturę.

Pisz jeśli czegoś nie zrozumiałaś

komentarz 5 grudnia 2015 przez BlackCat_ Początkujący (310 p.)

Dziękuje za pomoc :)

Zdjęcie zrobiłam sama w ps i ma 2500 x 1673 px wydawało mi się ,że to wystarczające.. bo 1 raz robię www :)

to jeszcze jedno pytanie, jakie powinny być wymiary tak mniej więcej ,żeby optymalnie 1 zdjęcie zajeło miejsce całkowite od lewej do prawej str? :)

mam plik zapisany z tym damaskiem w png to najwyżej zamiast rozciągać po prostu skopiuję parę razy i potem światło dorobię :)

komentarz 5 grudnia 2015 przez Filip31411 Dyskutant (8,820 p.)

Tu właśnie jest problem, bo szerokość strony (od lewej do prawej) zależy od rozdzielczości ekranu osoby oglądajacej stronę. Dlatego właśnie daje się jako tło powielenie zdjęcia o jakiejś mniejszej rozdzielczości.

komentarz 5 grudnia 2015 przez BlackCat_ Początkujący (310 p.)

Tylko tu trochę będzie problem z tym światłem ,bo i ono się powiela..

a chciałam żeby tylko na środku świeciło :)

komentarz 6 grudnia 2015 przez Filip31411 Dyskutant (8,820 p.)

Spróbuj zrobić tak:

Zrób ten obrazek w jakiejś wyższej rozdzielczości np. 1920 x 1080 px i go podepnij jako tło, a w css'ie do body wrzuć taką linijkę:

background-size: 100%;

Ta linijka rozciągnie to zdjęcie na całą stronę jeżeli będzie ono mniejsze niż strona, lub skurczy gdy będzie ono za duże. Po prostu dopasuje Ci je do szerokości strony.

Mówiłem żebyś zrobiła je w większej rozdzielczości po to, że lepiej, żeby zdjęcie zostało skurczone niż rozciągnięte (przy rozciąganiu tracimy na ostrości).

To powinno zadziałać

PS: Sory, że dopiero teraz odpisałem, ale sam się zainteresowałem tematem.

komentarz 6 grudnia 2015 przez BlackCat_ Początkujący (310 p.)

Udało się, dziękuję! :)

odpowiedź 5 grudnia 2015 przez Comandeer Guru (600,810 p.)

Po pierwsze: screenów się nie da skopiować do edytora. Dlatego podaje się kod - ZAWSZE.
Co do problemu: zmień no-repeat na repeat. Wówczas tło zacznie się powtarzać i powinno zająć całą stronę.

komentarz 5 grudnia 2015 przez BlackCat_ Początkujący (310 p.)

Pisałam pytanie późno w nocy i nie pomyślałam ,że faktycznie będzie trzeba kod skopiować.. na drugi raz się poprawię :)

Ogólnie zależy mi na dopasowaniu tego obrazka bez jego powielania, dlatego właśnie dodałam to: no-repeat