Фоновый размер для отзывчивого сайта

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

Моя проблема связана с граничным фоном, который я установил как img.bg, по сути, пытаюсь обмениваться изображениями и заменять img.bg2 & 3, когда размер достигает стандартных размеров экрана. Чтобы сделать это, я использую свойство видимости в своем стиле style.css. Я немного работал, и теперь его полностью перепутали, любая помощь и предложения были бы очень благодарны!

Я отправил свой последний пример в Интернете по адресу: www.ververserver.com

приветствий.

источник

2013-08-16 YIPPITYSKIP

Пожалуйста, разместите соответствующие биты кода здесь, спасибо. – mc10

Согласитесь с tehAon, вы слишком усложняете все дело!

background-size:cover;

Новое свойство CSS3. Всегда будет покрывать указанный элемент изображением. Независимо от размера экрана.

источник

2013-08-16 00:40:15 Zone6

Звучит так, как будто вы пытаетесь усложнить это. Вы хорошо используете CSS3? Они добавили новый атрибут, называемый размером фона, который растянет и уменьшит ваши изображения.

Вот ссылка на некоторую информацию http://www.css3.info/preview/background-size/

Кроме того, из w3cschools: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Поддержка браузеров: «Фон-размер свойство поддерживается в IE9 +, Firefox 4+, Opera, Chrome, и Safari 5+. "

источник

2013-08-16 00:26:25 tehAon

Привет, ребята! который отлично подходит для унифицированного определения размеров, я немного поиграю с ним. моя единственная проблема в том, что мне нужно, чтобы изображение растягивалось и становилось тоньше на 1024 пикселя, и снова для мобильных телефонов на 500 пикселей, вот почему я менял изображения, но, может быть, я могу изменить фон на разных разрешениях? плохо попробуйте, спасибо еще раз! – YIPPITYSKIP

Итак, я прочитал эту статью, а что было хорошо: http://css-tricks.com/perfect-full-page-background-image/

и я пришел с решением, которое, кажется, то, что некоторые работы на 500px и 1824px, но на 1024px фоновое изображение становится способом больше, чем исходный файл, Heres код, который я до сих пор в файле раскрывающихся basic.css:

body { 
background-image: url("images/SQlarge.svg"); 
background-size: cover; 
background-repeat: no-repeat; 
background-size: cover; 
} 

@media only screen 
and (max-width : 1024px) 
{ 
body { 
background-image: url("images/SQ1024.svg"); 
background-size: cover; 
background-repeat: no-repeat; 
background-size: cover; 
} 
} 

@media only screen 
and (max-width : 500px) 
{ 
body { 
background-image: url("images/SQmobile.svg"); 
background-size: cover; 
background-repeat: no-repeat; 
background-size: cover; 
} 
} 

img, audio, video, canvas { max-width: 100%; } 

.container { 
    max-width: 80em; 
    width: 88%; 
    margin-left: auto; 
    margin-right: auto; 
}

Вы можете увидеть сайт в www.ververserver.com, я признателен за любую помощь в этом! спасибо

источник

2013-08-16 22:36:44 YIPPITYSKIP

Фоновый размер для отзывчивого сайта

ответ

Смежные вопросы