Как мне увеличить ширину параллакс-изображения до полной ширины и высоты - PullRequest
Новая
       0

Как мне увеличить ширину параллакс-изображения до полной ширины и высоты

0 голосов
/ 31 октября 2018

Как расширить изображения параллакса, чтобы охватить всю ширину экрана и высоту вплоть до навигации. Я не могу пройти мимо контейнеров. Я попытался удалить параметры поля на контейнере Я также пытался придать классу параллакса полную ширину 100%, но ничего не сделал. В основном я хочу, чтобы верхняя половина выглядела так. http://www.toonsville.co.uk/aboutus.html вместо того, чтобы иметь края контейнера. В настоящее время это выглядит так http://toonsville.co.uk/learn.html 

 body,html{
    height: 100%;



   }




    .container{
     margin: 0 auto;
     background-color: #ffcc66;
     font-size: 24px;
     padding: 50px;
     position: relative;
     }

    .parallax {
     min-height: 400px;
     background: transparent;
     }

    .container img{
     height: 10em;
     position: absolute;
     left: 40em;
     top:11em;
     z-index: 1;
     }


     h2{
     color:#FFD;
     font-size:3em;
     font-family: 'Sigmar One', cursive;
     padding-top: 4em;
     padding-left: 1em;
     position: relative;
     z-index: 1;
     }

    .innercontainer{
     background-color:#ffcc66;
     padding: 2em;


    }

   .aboutus {


    background-color: #ffd;
    font-size:25px;
    font-family: 'Handlee', cursive;    
    padding: 2em;
    border: 4px solid darkred;
    border-radius: 50px;
    -webkit-box-shadow: 6px 7px 14px 1px rgba(0,0,0,0.26);
    -moz-box-shadow: 6px 7px 14px 1px rgba(0,0,0,0.26);
    box-shadow: 6px 7px 14px 1px rgba(0,0,0,0.26);
    }
<body>

    <nav>

        <header class="clearfix">

            <div class="topnav" id="myTopnav">
                <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
                <a href="#"><i class="fa fa-fw fa-search"></i> Search</a>
                <a href="aboutus.html"><i class="fa fa-fw fa-envelope"></i> About us</a>
                <a href="#"><i class="fa fa-fw fa-envelope"></i>Contact us</a>
                <a href="#"><i class="fa fa-fw fa-envelope"></i>Shop</a>
                <a href="#"><i class="fa fa-fw fa-user"></i> Login</a>
            </div>
        </header>
    </nav>
    <title>The about us page</title>


    <div class="container">


        <div class="parallax" data-parallax="scroll" data-z-index="1" data-image- src="images/moudarkbackground.png"
            data-speed="0.3">
            <h2>ABOUT US</h2>
        </div>
        <img src="images/timon.png">
        <div class="innercontainer">
            <p class="aboutus">Whether you’re an executive accountant, work in a

                factory or even a policeman, we all have one thing in common.
                most of us have had the same conversion at
                least once within the last 5 years.
                Now you’re thinking that I’m possibly just making things up.
                The conversation starts off something to this effect:
                “Do you remember the cartoon?” We look at classic cartoons.
            </p>
        </div>
        <div class="parallax" data-parallax="scroll" data-z-index="1" data-image-src="images/classictoons5.png">
            <h2>saturday morning nostalgia!</h2>
        </div>
    </div>
</body>
</body>

Как развернуть изображения параллакса, чтобы охватить всю ширину экрана и высоту вплоть до навигации. Я не могу пройти мимо контейнеров. Я попытался удалить параметры поля на контейнере Я также пытался придать классу параллакса полную ширину 100%, ничего не сделал.

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Вы должны попробовать дать фоновое изображение в параллаксе CSS. 

.parallax {
            min-height: 400px;
            background: transparent;
            background-image: url(images/moudarkbackground.png);
            background-size: cover;
        }

размер фона: обложка ; Масштабирует изображение как можно больше, не растягивая его. Если пропорции изображения отличаются от элемента, оно обрезается либо по вертикали, либо по горизонтали, чтобы не осталось пустого места.

0 голосов
/ 31 октября 2018

Дайте телу фоновое изображение, которое вы хотите использовать в своем CSS ...

Например: 

 <html>
<style>
body {
 background: url('image.jpg')
}
</style>

<body>

My Name is......

</body>


</html>

Таким образом, он будет находиться позади всего тега body ...

Ты понимаешь это?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...