background блоков в адаптивной верстке

(Ответов: 9, Просмотров: 1485)
  1. Дипломник Аватар для Sperc
    • Регистрация: 19.01.2013
    • Сообщений: 107
    • Репутация: 3
    • Webmoney BL: ?
    Добрый день, уважаемые. Вопрос следующий - делаю адаптивную верстку с @media запросами. 100% ширины body, процентные размеры картинок. Все складывалось замечательно, пока не дошло до блоков контента. У них я поставил background-ом картинку загнутого листа блокнота. Структура:

    • верхний блок
    • блок контента 100% ширины
    • подвал

    Внутри блока контента 3 квадратных блока с этим самым background-ом. При сужении нужно, чтобы размеры тоже сужались и в ширину, и в высоту. При сужении экрана они сужаются только в ширину, в высоту остаются как есть. А так же часть картинки в ширину убирается, а шрифт лезет вниз, за пределы блока контента. А нужно, чтобы блоки с background равномерно уменьшались в ширину и высоту, а вместе с ними и шрифт. Что посоветуете?

    Нажмите на изображение для увеличения.  Название:	-88693455.jpg  Просмотров:	7  Размер:	35.2 Кб  ID:	16127
    Нажмите на изображение для увеличения.  Название:	acddb23ba19c.jpg  Просмотров:	13  Размер:	60.2 Кб  ID:	16128

    Код HTML:
    <!DOCTYPE html> <html lang="ru-RU"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="content"> <div class="main"> <a href="/"><img src="http://webmasters.ru/forum/images/SEGA_logo.png" class="logo"></a> <div class="skype"><a href="#"><img src="http://webmasters.ru/forum/images/skype1.png" class="skype1"></a> <p>Изучайте английский язык дистанционно!</p> </div> <div class="nav"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О компании</a></li> <li><a href="#">Предложения</a></li> <li><a href="#">Прайс</a></li> <li><a href="#">Вакансии</a></li> </ul> </div> </div> </div> <div class="news"> <div class="bar"> <div class="block1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel mi sem. Nam in leo vitae neque vulputate luctus nec non turpis.</p> </div> <div class="block2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel mi sem. Nam in leo vitae neque vulputate luctus nec non turpis.</p> </div> <div class="block3"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel mi sem. Nam in leo vitae neque vulputate luctus nec non turpis.</p> </div> </div> <div class="blog"> <div class="post"> <img src="http://webmasters.ru/forum/images/masters.jpg" width="300" height="300"> <h2>Online Education Advantages</h2> <p>Sed nulla eros, tempor at ultricies a, lacinia vel estsed notellus sed enim volutpat euismod at laoreet nibh.
    Integer euismod suscipit consequat. Maecenas gravida, quam aliquam pretium vitae a nunc. Donec dolor arcu, lacinia iaculis; porttitor ac sapien? Proin imperdiet blandit metus, ut ultrices augue suscipit vel. Morbi vitae nisl tortor. Suspendisse facilisis velit quis ligula consequat interdum! Nulla tincidunt accumsan nunc, varius elementum lacus interdum in.Proin imperdiet blandit metus, ut ultrices augue suscipit vel. Morbi vitae nisl tortor. Suspendisse facilisis velit quis ligula</p> </div> </div> </div> <div class="footer"> <div class="info"><a href="/"><img src="http://webmasters.ru/forum/images/SEGA_logo.png" class="logo"></a></div> </div> </body> </html>
    CSS

    Код:
    * {
    	padding: 0;
    	margin: 0;
    }
    
    h1, p {
    	margin-bottom: 30px;
    }
    
    body {
    	background: #41466b;
    }
    
    .content {
    	max-width: 1600px;
    	margin: 0 auto;
    	background: url(images/background.jpg);
    	padding-top: 100px;
    	overflow: hidden;
    }
    
    .main {
    	width: 75%;
    	margin: 0 auto;
    }
    
    .logo {
    	width: 25%;
    	margin-bottom: 7%;
    	margin-top: 3%;
    }
    
    .skype {
    	float: right;
    	font-size: 14px;
    	font-weight: bold;
    	color: #fff;
    	margin-top: 5%;
    	margin-right: 6%;
    	width: 30%;
    }
    
    
    .skype1 {
    	float: left;
    	margin-right: 3%;
    	width: 20%;
    
    }
    
    .skype p {
    	margin-top: 3%;
    }
    
    .nav {
    	margin-bottom: 120px;
    	height: 60px;
    	opacity: 0.9;
    	width: 100%;
    }
    
    .nav li {
    	float: left;
    	list-style: none;
    	padding: 28px 20px;
    	font-family: Arial, sans-serif;
    	height: 28px;
    	background: url(images/bg-nav.png) repeat;
    }
    
    .nav li:hover {
    	background: #303354;
    	opacity: 0.9;
    }
    
    .nav a {
    	display: block;
    	text-decoration: none;
    	color: #fff;
    	font-size: 20px;
    	font-weight: bold;
    }
    
    .news {
    	background: url(images/content-inner.jpg);
    	overflow: hidden;
    	width: 100%;
    	opacity: 0.8;
    }
    
    .bar {
    	width: 75%;
    	margin: 0 auto;
    }
    
    .block1 {
    	background: url(images/block.png) no-repeat;
    	width: 25%;
    	float: left;
    	margin: 40px 10px;
    }
    
    .block2 {
    	background: url(images/block2.png) no-repeat;
    	width: 25%;
    	float: left;
    	margin: 40px 10px;
    }
    
    .block3 {	
    	background: url(images/block.png) no-repeat;
    	width: 25%;
    	float: left;
    	margin: 40px 10px;
    }
    
    .block1 p {
    	margin: 50px 50px;
    	font-size: 14px;
    	font-weight: bold;
    }
    
    .block2 p {
    	margin: 50px 50px;
    	font-size: 14px;
    	font-weight: bold;
    }
    
    .block3 p {
    	margin: 50px 50px;
    	font-size: 14px;
    	font-weight: bold;
    }
    
    .blog {
    	color: #fff;
    	width: 1280px;
    	margin: 0 auto;
    	font-size: 16px;
    }
    
    .post {
    	width: 700px;
    }
    .post img {
    	float: left;
    	margin-right: 25px;
    }
    
    .footer {
    	max-width: 1600px;
    	margin: 0 auto;
    	background: url(images/background.jpg);
    	overflow: hidden;
    }
    
    .info {
    	width: 75%;
    	margin: 0 auto;
    }
    Последний раз редактировалось Sperc; 21.11.2014 в 16:49.
    • 0
  2. Разработка любых сайтов Аватар для ArhStrAngeR
    • Регистрация: 08.06.2011
    • Сообщений: 3,376
    • Записей в дневнике: 1
    • Репутация: 2506
    Sperc, попробуйте для этих блоков добавить background-size: cover;
    • 0
  3. Дипломник Аватар для Sperc
    • Регистрация: 19.01.2013
    • Сообщений: 107
    • Репутация: 3
    • Webmoney BL: ?
    ArhStrAngeR, ´этот параметр ничего не изменил. Причем для других картинок, например, в хэдере, все проходит как надо. Правда, там картинка как <img>, а не как background
    • 0
  4. Дипломник Аватар для ticapac
    • Регистрация: 19.11.2010
    • Сообщений: 119
    • Репутация: 32
    • Webmoney BL: ?
    Sperc, попробуй фон сделать как img тогда и поиграть с z-index'ами
    • 0
  5. Дипломник Аватар для Ispanec
    • Регистрация: 27.04.2010
    • Сообщений: 142
    • Репутация: 33
    Sperc, как то так....

    Код:
    .block2 {
    	background: url(images/block.png) no-repeat;
    	width: 25%;
    	float: left;
    	margin: 40px 10px;
            overflow: auto;   
    -moz-background-size:100% 100%;   
    -o-background-size:100% 100%;    
    -webkit-background-size:100% 100%;    
    -khtml-background-size:100% 100%; 
    background-size:100% 100%;
    }
    «Если кто не хочет трудиться, тот и не ешь!» © Послание апостола Павла к Фессалоникийцам, гл. 3, ст. 10
    • 0
  6. Разработка любых сайтов Аватар для ArhStrAngeR
    • Регистрация: 08.06.2011
    • Сообщений: 3,376
    • Записей в дневнике: 1
    • Репутация: 2506
    Sperc, скиньте тогда верстку в архиве с картинками
    • 1

    Спасибо сказали:

    Sperc(22.11.2014),
  7. ui-разработчик Аватар для kickboxer
    • Регистрация: 13.05.2011
    • Сообщений: 743
    • Репутация: 227
    • Webmoney BL: ?
    По поводу размера шрифта:
    http://css-tricks.com/viewport-sized-typography/

    Ну или использовать px или em и захардкодить изменение размеров шрифта в media запросах.
    • 2

    Спасибо сказали:

    Lacoste(22.11.2014), Sperc(22.11.2014),
  8. Дипломник Аватар для Sperc
    • Регистрация: 19.01.2013
    • Сообщений: 107
    • Репутация: 3
    • Webmoney BL: ?
    Проблему решил ArhStrAngeR, за что ему огромное спасибо. Все решилось добавлением свойства background-size: contain и max-width: 230px для divов бара, а так же отступами для контента внутри. Спасибо.
    • 0
  9. Опытный Аватар для Valerij
    • Регистрация: 23.11.2012
    • Сообщений: 497
    • Репутация: 68
    • Webmoney BL: ?
    Sperc,делаю так @media (min-width : 320px){ {width:100%;min-width:320px; height:auto; position: relative; z-index: 10;
    background-image: url(../images/controls_bg60.jpg);
    background-repeat: repeat;}}

    @media (min-width: 768px) { Уже другая картинка и параметры }
    @media (min-width: 992px){ Уже другая картинка и параметры }
    @media (min-width: 1200px){ Уже другая картинка и параметры }
    • 0
  10. Дипломник Аватар для Sperc
    • Регистрация: 19.01.2013
    • Сообщений: 107
    • Репутация: 3
    • Webmoney BL: ?
    Valerij, согласился бы с вами, не будь у картинки загнутого края и прозрачности - оно начнет некрасиво друг на друга накладываться.
    • 0

Похожие темы

Темы Раздел Ответов Последний пост
background при отключенных картинках
Web программирование 5 23.07.2014 18:59
Индексация блоков
Yandex 3 12.02.2014 23:06
плавающие разные блоки при адаптивной верстке
Web программирование 2 21.09.2013 16:48
не работает background если в имени файла есть пробел
Web программирование 4 02.08.2013 20:44
Связать картинку background в html и css (base64)
Joomla 1 07.04.2013 17:11

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры