фоновое изображение на несколько страниц

Question

фоновое изображение на несколько страниц

0

Я разрабатываю сайт, похожий на этот http://www.sbnation.com/longform/2013/11/20/5119180/manny-pacquiao-vs-brandon-rios-fight-2013-profile. Я хочу иметь несколько изображений полной ширины, но в моем текущем коде я могу добавить только одно изображение с полной шириной. Я установил изображение фиксированным и шириной до 200% и высотой. Я установил абсолютное позиционирование на div divimage div и добавил текст в div. Мне нужно установить несколько фоновых изображений в контент div.

Проверьте мой текущий код и внесите корректировки через jsfiddle. мой jsfiddle

Вот мой html:

<!DOCTYPE html>
<html lang ='en'>
<head>

<title></title>

<link rel="stylesheet" style="text/css" href="/project.css">
<!------script-------->
<script>
function Cat(name, breed) {
    this.name = name;
    this.breed = breed;
}

// let make some cats!
var cheshire = new Cat("Cheshire Cat", "British Shorthair");
var gary = new Cat("Gary", "Domestic Shorthair");

// add a method "meow" to the Cat class that will allow
// all cats to print "Meow!" to the console
Cat.meow = function(){
    console.log("Meow!");
}
// add code here to make the cats meow!
Cat.meow("Meow!");

</script>

</head>
<body>
<div id="fullimage">

<img src="http://cdn1.sbnation.com/uploads/chorus_image/image/22976533/20131111_ads_ss1_033.0_cinema_1050.0.jpg">

</div>
<div id="center">

<div id="content">
<p>
RAISING EYEBROWS
Paul Flannery
Ask anyone around the league what has caught their eye in the first week of the season, and it a safe bet the first words out of their mouth will be "Anthony Davis," followed by long sighs. The long-winged bird of prey has arrived, and were not talking about Pierre the Pelican.

Barely a half-dozen games into his second season, Davis is putting on a nightly show for the rebranded New Orleans Pelicans. Its not just the gaudy stats, although 23 points, 11.5 rebounds and 4.3 blocks tend to get your attention. Rather, its the way he plays: dominating stretches of the game with his soft touch, nimble athleticism and dontbringthatweakstuffinhere presence at the rim.

On Friday night against the Lakers, Davis reached back over his body to block a disbelieving Pau Gasol and then sprinted down the court and got fouled at the other basket. The whole play took a couple of seconds, but contained all of the jaw-dropping athleticism and court sense that makes fans giddy and opponents shake their heads.
BEST OF SUNDAY SHOOTAROUND



Bill Russell gets his statue in Boston
Stats, storytelling and Sloan
New Orleans dreams big
The rise of Paul George
Hawks try to attract free agents
The stories of 2012-13
In another sequence, Davis caught the ball above the free throw line, took one step to the dotted half circle and dunked from there. He eviscerated Gasol all night, swallowing up his shots and repeatedly beating him and the rest of the Lakers down the floor for dunks, en route to a career-high 32 points.

It not like this is any great surprise. Davis entered the NBA fresh off a devastating season at Kentucky, where he controlled the college game from the opening tip. It was always going to happen. It was just a question of when.

As a rookie, Davis averaged a respectable 13.2 points and 8.5 rebounds while shooting over 50 percent from the field. It was a solid, if relatively unspectacular debut. He finished second in the Rookie of the Year voting to unanimous winner Damian Lillard despite posting a better PER, but no one really argued the decision too strenuously.

Perhaps that was because Davis' defensive impact didn't live up to his advanced billing. He blocked his share of shots, but New Orleans was a poor defensive team with him on the court. They weren't much better without him, which was an indictment of the whole roster.

Things are starting to change. With Jrue Holiday at the point, the Pelicans have someone to defend the ball, and with the addition of Tyreke Evans and a healthy Eric Gordon, they are more balanced offensively.

Early season small sample sizes abound, but New Orleans is ranked a respectable 11th in defensive rating and an equally-encouraging 11th on the offensive side, per Basketball Reference. Save for a dreadful 20-point loss to the Magic in their second game, they've also been competitive every night out and earned an impressive win in Memphis on Wednesday.

The Pelicans still have a long way to go. The depth is better, but still worrisome. Evans has been slow to adjust to his new role off the bench and Ryan Anderson shooting and floor spacing are sorely missed. But, they are getting there, and thanks to Davis' emergence, they may be ahead of schedule.

Here are a few other pleasant developments from the first full week of the season:

PAUL GEORGE RISES AND THE PACERS TAKE CARE OF BUSINESS

When we last left the Pacers, they were on the wrong end of a rather incredible seven-game conference finals loss to the Miami Heat. It was incredible because no one really expected Indiana could keep up with Miami in a playoff series. Certainly few expected that George would be able to match LeBron James point-for-point and shot-for-shot like he did at times.

It was a massive leap forward for both the team and the player, and George was rewarded with a maximum contract extension in the offseason. Still, the prevailing wisdom was the Pacers would take a backseat to the Bulls once Derrick Rose returned to the court. They were good, obviously, but unless George took a massive leap into the superstar strata, they had probably reached their limit.

NO ONE SHOULD BE EAGER TO PUT A CAP ON [GEORGE'S] POTENTIAL AFTER WHAT HE'S SHOWN IN HIS FIRST FEW SEASONS
We might want to reconsider. George may not average 25-8-4 and shoot 40 percent from behind the arc for the entire season, but no one should be eager to put a cap on his potential after what he shown in his first few seasons. The multi-talented hybrid forward has improved every year he been in the league. The only stop left is legit star status.

The Pacers have followed his lead, winning their first six games while dispatching both the Pistons on the road and the Bulls at home. Both George and the Pacers have taken the essential lessons from their postseason baptism and applied them to the regular season. They have cracked the code on winning games. Double digit deficits in the second quarter disappear by the end of the third, and they are mastering the art of putting games away in crunch time.

The Pacers are also not in a mood to give ground back to Chicago. As George told NBA.com Steve Aschburner:

"We want to step away from that shadow as the 'little brothers' of this division. Their success is the Michael Jordan era. This is a new age, this is a new team. It ours till they take it."

GOLDEN STATE'S D

From Stephen Curry otherworldly shooting to the untapped potential of Klay Thompson and Harrison Barnes, there is much to like about the Warriors this season. They play fast, bomb 3s and have a strong inside-out game with Curry and a slimmed-down David Lee. On pure aesthetic grounds, it hard to top the Dubs for nightly entertainment.

That all well and good. The Warriors have always been compulsively watchable, even as a guilty pleasure. What different this season is their defensive chops.

It really not that complicated, either. Andre Iguodala is one of the game top perimeter defenders. Andrew Bogut is one of the league premier rim protectors. Take those two talents and surround them with willing defenders and a sound scheme and the Warriors -- yes the Warriors -- have emerged as one of the top defensive squads in the league.

With so much depending on Bogut health, it futile to project where they might end up, but even without Curry on Friday, they battled the Spurs to the wire in a 76-74 defeat. It was a frustrating loss, made more so by some end-of-game miscues, but it was also encouraging. No way the Warriors hang in a game like that in the past. For now at least, the defense makes them a legit threat.

WELCOME BACK, KEVIN LOVE

The early season is full of obscure trivia, but none had as much resonance as the mark Kevin Love set when he averaged better than 26 points and 15 rebounds in his first five games. The only other player to do that in the last 15 years? Kevin Garnett, of course.

Long after his departure, KG still casts a very long shadow over the Timberwolves organization. Every mark, every number and every milestone has his name attached to it. Love and the Wolves thought they were ready to break out and write their own history last season, but injuries wrecked those plans. This year may be the one they get it right.

Love had another monster game on Friday with 32 points and 15 rebounds in a win over the Mavericks. He also had eight assists, which gives him 30 after six games. The numbers become a blur after a while, but no other power forward brings the array of skills that Love brings to the equation.
</p>

</div>
</div><!-----center---------->
</body>
</html>

CSS3:

#fullimage
{
position: fixed; 
top: -50%; 
left: -50%; 
width:  200%; 
height: 200%;

}
#fullimage img
{
position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;

}
#center
{
width:1700px;
margin-right:auto;
margin-left:auto;
}
#content
{
min-height:2000px;
background:white;
margin-left:-10px;
position:relative;
top:1000px;


}

Любая помощь будет оценена по достоинству.

chris 26 нояб. 2013, в 01:14

Источник

Теги:

javascript

jquery

html5

responsive-design

2 ответа

1

Это то, что вы хотите: Ссылка: http://jsfiddle.net/67Azp/1/

CSS:

#fullimage
{
    position: fixed; 
    top: 0; 
    left: 0; 
    width:  100vw; 
    height: 100vh;

}

Ani 25 нояб. 2013, в 22:27

0

Сайт, на который вы смотрите, имеет изображения в качестве фона, и вы добавили изображение в HTML.
Ani 26 нояб. 2013, в 00:02

Ещё вопросы

Сайт, на который вы смотрите, имеет изображения в качестве фона, и вы добавили изображение в HTML.

davidpauljunior · Accepted Answer · 2013-11-25T22-21-00.000Z

Если вы хотите использовать ту же технику, что и сайт, на который вы ссылаетесь, вам нужно будет использовать <div> с фоновыми изображениями, а background-attachment к background-attachment fixed.

Как это:

http://jsfiddle.net/67Azp/9/