Фиксированный меняющийся фон

Enjo · 04.03.2012

Здравствуйте!

Поставил на фон картинку (1920х1080) и даже больше...

Код:

body {
padding : 0;
margin : 0;
font : 14px Georgia, serif;
line-height : 150%;
color : #666;
background:url(images/backgr1.jpg) no-repeat center center fixed;
	 -webkit-background-size: cover;
	   -moz-background-size: cover;
	   -o-background-size: cover;
	   background-size: cover; 
}

он работает отлично, картинка масштабируется, не искажается
НО, еще хочу чтоб картинки менялись... в нете нарыл...все хорошо меняется и осталось только в стилях (css) прописать

Код:

img#bg {
  ......
......................
}

Что не пытаюсь написать, искажает картинку и все :angry:

Код:

img#bg {
  /*position: fixed;
  top:0;
  left:0;
  /*-webkit-background-size: cover;
	    -moz-background-size: cover;
	    -o-background-size: cover;
	    background-size: cover;
  /*width:100%;*/
  position:fixed;top:0;left:0;
  min-width:100%;
  width:auto;height:100%;
  z-index:-1;
}

:wacko: Думал прописать, то что и в боди, но оноделает ну очень большуюю картинку

dimamen777 · 05.03.2012

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS3 Transitions Example</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"/>
<style>
body {
background: #222;
color: #fff;

}

.textContainer {

}

.textContainer {
margin: auto;
width: 800px;
height: 300px;
text-align: center;
margin-top: 100px;
border: 1px solid #028fd7;

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 50px;

-webkit-transition-property:color, background;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;

}

.textContainer a{
text-decoration: none;
color:#999;

-webkit-transition-property:color;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
}

.textContainer:hover {
color:#555;
background:#fff;
}

.textContainer:hover a{
color: #96dbfe;
}

.textContainer a:hover {
color:#028fd7;
}
</style>
</head>

<body>

<div class="textContainer">
<p>Hi there, my name is Josh. Check out my <a href="http://www.krop.com/joshuajohnson/">portfolio</a>, follow me on <a href="http://twitter.com/secondfret">Twitter</a>, and read my recent <a href="http://designshack.co.uk/author/joshuajohnson">rants</a>.</p>
</div>

</body>

</html>

вот пример я по нему учился, только не знаю на практике к чему это можно применить, что скажут эксперты.....

Фиксированный меняющийся фон

Enjo

Well-Known Member

dimamen777

Well-Known Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей