Skocz do zawartości
Zaloguj się, aby obserwować  
Obserwujący 0
gibek2

Obrazek na całej szerokości

Przez gibek2, w xHTML / CSS / Javascript

Polecane posty

gibek2    12

gibek2
Napisano (edytowany)

witam mam taki problem ponieważ chciał bym zrobić na samej górze tło z obrazka natomiast nie mam pomysłu jak poradzić sobie z tymi paskami ( http://i.imgur.com/5GvC6Id.jpg ) na telefonie wygląda to normalnie wiadomo mniejsza rozdzielczość.

 

proszę pomóżcie, myślałem nad zwiększeniem po prostu rozmiaru zdjęcia ale wtedy nie wygląda to ładnie i jest za wysokie oraz traci na jakości ;/

 

albo może macie jakiś sposób, pomysł jak to można zamaskować bez powtarzania tego zdjęcia.

 

Strona online : http://gibek.w.pw/

 

 

Kod : 

<!DOCTYPE html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Moja strona </title>
<link href='http://fonts.googleapis.com/css?family=Coming+Soon' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>

<body>
<div id="header"> </div>


</body>
</html>

css :

body { margin: 0; }

#header { background:url(../img/bg.jpg) center no-repeat; height:900px; }
Edytowano przez gibek2 (zobacz historię edycji)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

elcct    159

elcct
Napisano

Możesz użyć:

background-size: 100%;
background-image: url(../img/bg.jpg);
background-repeat: no-repeat;

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

gibek2    12

gibek2
Napisano

dzięki elcct o to chodziło ale też nie do końca ponieważ nie wiem czemu znikła taka fala która byłą celowo zrobiona nie wiem czemu ;/

 

zdjęcie jest teraz takie "proste"

 

GQs1jzV.jpg

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Gość Kamikadze   

Gość Kamikadze
Napisano

Bo teraz obrazek jest za niski. Zmień rozdzielczość i będzie jeszcze inaczej.

 

Teraz musisz zmienić wysokość strony :)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Piotr GRD    608

Piotr GRD
Napisano

Fala zniknęła, bo wysokość #header ustawiłeś na 900px, a przeskalowany proporcjonalnie obrazek nie tylko się poszerzył, ale i zwiększyła się jego wysokość.

 

Mając na uwadze to, że na każdym ekranie będzie inna szerokość tła (np. ja wciąż korzystam z ekranu 1024px, bardzo wiele osób ma 1280px), przy skalowaniu proporcjonalnym również inna jego wysokość, musisz dobrze przemyśleć swój efekt. Pewną pomocą będzie oddzielenie "fali" od zdjęcia samochodu, zrobienie jej jako osobnego przeźroczystego GIFa lub PNG.

 

I pamiętaj to co napisał maniack - póki co jeszcze nie każda przeglądarka obsługuje wszystkie funkcje CSS3, takie jak background-size.

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się
Zaloguj się, aby obserwować  
Obserwujący 0
Przejdź do listy tematów xHTML / CSS / Javascript
×