Inne działy

 

 

CSS właściwość background-position

 

Definicja i Wykorzystanie

Właściwość Background-position ustawia pozycję początkową dla obrazu tła.

Uwaga: W przeglądarkach Firefox i Opera, właściwość background-attachment musi być ustawiona na "fixed".

Wartość domyślna: 0% 0%
Dziedziczenie: nie
Wersja: CSS1
JavaScript składnia: object.style.backgroundPosition="center"

 

Właściwość Background-position jest obsługiwana przez wszystkie główne przeglądarki.

Uwaga: wartość "inherit" nie jest obsługiwana w IE7 i wcześniejszych. IE8 wymaga !DOCTYPE. IE9 obsługuje "inherit".

 

Wartości właściwości

 

WartośćOpis
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Jeśli określić tylko jedno słowo kluczowe, druga wartość będzie "center"
x% y% Pierwsza wartość to pozycja pozioma, a druga to pionowa. W lewym górnym rogu jest 0% 0%. Prawy dolny róg jest 100% 100%. Jeśli określić tylko jedną wartość, druga wartość będzie 50%. . Wartość domyślna: 0% 0%
xpos ypos Pierwsza wartość to pozycja pozioma, a druga to pionowa. W lewym górnym rogu jest 0 0. Jednostkami mogą być piksele (0px 0px) lub jakiekolwiek inne jednostki CSS. Jeśli określisz tylko jedną wartość, druga wartość będzie 50%. Można mieszać % i pozycje
inherit Określa, że ustawienie właściwości background-position powinna być dziedziczona z elementu nadrzędnego

 

Przykład

body {background-image: url(/img/grafika.jpg) top center;}

body {
  background-image: url(/img/grafika.jpg);
  background-repeat: no-repeat;
  background-position: 30% 80%;
}

 

Przykład

?<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.background {
border:1px solid #000;
background-image:url('images/mojafgrafika.png');
background-position:50% 50%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>Background-Position Przykład</h1>
<div class="background"><p>Jest to na przykład dla własności pozycji tła . </p></div>
</body>
</html>

Przykład

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-image:url('mojagrafika.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>

<body>
<p><b>Note:</b> W przeglądarkach Firefox i Opera, właściwość background-attachment musi
być ustawiona na "fixed".</p>
</body>
</html>

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.