Блог

Главная - Вопросы по программированию - Добавить фон с бесконечной шириной некоторых элементов в заголовок

Добавить фон с бесконечной шириной некоторых элементов в заголовок

#html #css

#HTML #css

Вопрос:

Это живая демонстрация: http://baogiadientu.com/demo/fridgevan /
И результат, который я хочу: http://baogiadientu.com/demo/fridgevan/images/demo.png

Я хочу добавить фон с бесконечной шириной к двум элементам ( .top-bar и .nav ). Я пытался сделать то же .bgwhite самое с фоном, но появляется полоса прокрутки, а это не то, что я хочу. Есть ли у кого-нибудь какие-либо советы о том, как добиться этого без полосы прокрутки?

Вот моя структура HTML:

 <div class="container">

        <header class="clearfix">
            <div class="bgwhite"></div>
            <div class="logo">
                <img alt="logo" src="images/logo.png">
            </div> <!-- end .logo -->

            <div class="beside-logo">
                <div class="white-spce"></div>
                <div class="top-bar">

                </div> <!-- end .top-bar -->

                <div class="nav">

                </div> <!-- end .nav -->
            </div> <!-- end .beside-logo -->
        </header>

 </div> <!-- end .container -->

Комментарии:

1. Если под бесконечным вы подразумеваете полную ширину браузера, тогда width: 100% это должно сработать. Если будет горизонтальная прокрутка, вам, возможно, придется использовать решение javascript.

2. Вы можете видеть эту страницу, они не используют javascript. Я пытался сделать то же самое, но заголовок сломан 🙂

3. Да, но будут ли пользователи прокручивать по горизонтали?

4. Нет, пользователи не будут. Это нехорошо. Как вы можете видеть на моей живой демонстрации, я успешно оформил .bgwhite, чтобы добавить фон с бесконечной шириной, но я не могу сделать то же самое с правым элементом 🙂

Ответ №1:

Я уверен, что нам нужно было бы увидеть CSS, чтобы ответить на этот вопрос, но я полагаю, у вас есть файл .css, связанный с этим документом .html, я прав?

В этом случае просто установите для фонового изображения значение body и поиграйте со свойствами, доступными для атрибута background .

 body {
   background: url(images/yourbg.jpg) fixed center repeat-x;
}

И в случае, если вы хотите установить белый фон с небольшим количеством прозрачности, чтобы фон сайта все еще появлялся оттуда, попробуйте это:

 .nav {
   background: rgba(255,255,255,0.5);
}

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

Комментарии:

1. Спасибо за вашу помощь! Я делаю то же самое на этой странице fridgevan.kudoswebdesign.com но результат, который я архивирую, не тот же самый. Я не понимаю, почему они могут это сделать 🙂

Метки: