фоновые изображения растягивающие проблемы

Я разрабатываю веб-сайт для одной политической партии (а не для клиента, моя собственная цель) с использованием программного обеспечения wordpress. Я изменяю тему, называемую свежей жизнью по теме junkie. на самом деле я не разработчик, но я прилагаю максимум усилий для изменения стилей темы, которые соответствуют политическому флагу.фоновые изображения растягивающие проблемы

Прежде всего, сайт, который я изменяю, является www.ysrcong.com. URL-адрес политического участника: http://c.searchandhra.com/1/YSR%20Cong%20Flag.jpg.

Я пытаюсь установить цвет фона левой части веб-страницы с 2266BB, правой частью веб-страницы с 0FBD60 и средней частью страницы с белым цветом. Средняя часть ширины веб-сайта составляет 950px. нет специальных ширин для левого и правого.

У меня есть googled и найдено одно решение. решение, которое я реализовал, - это то, что я разработал одно изображение с цветами 2266BB и 0FBD60 той же ширины и высоты и цвета 2266BB в левом и другом справа.

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

1. in ie6 seems everything was messed up. entire layout was changed. 
2. in all browsers white colour was not filled with 100% in middle part of webpage. at the bottom it was left some height and that part was filled with background image

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

следующий код я написал.

html code 
------------------------- 
<body> 
    <div id="bg"><img src="bg.png" width="100%" height="100%" alt=""> 
    </div> 
    <div id="#wrapper"> 
    webpage content goes here. 
    </div> 
</body> 

styles i applied. 
--------------------------------- 
body { 
    height:100%; margin:0; padding:0; 
} 
html { 
    height:100%; 
} 
#bg { 
    position:fixed; top:0; left:0; width:100%; height:100%; 
} 
#wrapper { 
    background: #fff; 
    margin: 0 auto 0px auto; 
    padding: 10px 15px 0 15px; 
    width: 950px;  
    position:relative; 
}

источник

2012-03-01 MAHESH

Удалить #bg DIV, который вы создали для фона
Создание максимума 1px изображения на 3000 + рх шириной. Разделить изображение пополам с правой и левой стороны будучи Teh цвета, которые вы хотите
установить тело тега в CSS для background: url(path/to/your/image) repeat-y center top;
Празднуйте, вы закончили

источник

2012-03-01 17:55:58 ckaufman

Я новичок в проектировании стороны. Пожалуйста, объясните это. Создайте изображение размером 1px на 3000 + px в ширину. что означает ширину 3000+ px. Я создаю изображение в маске ms. – MAHESH

Создайте 2-цветное изображение .gif с высотой 1 пиксель и шириной 3000 пикселей или более. Установите это как фон тега тела с приведенным выше css. – ckaufman

его отлично работает. Спасибо, босс. Я не могу решить вторую проблему. пожалуйста, предложите исправить это. – MAHESH

Моя склонность будет делать что-то вроде это.

HTML

<!doctype html> 
<html> 
<body> 
<div class="stripe one"></div> 
<div class="stripe three"></div> 
<article> 
Content here. 
</article> 
</body> 
</html>

С помощью CSS

html {height:100%;} 
body {background-color:#fff;height:100%} 
.stripe {width:30%;height:100%;position:fixed;top:0;bottom:0;} 
.one {left:0;background-color:#26b;} 
.three {right:0;background-color:#0FBD60;} 
article {width:30%;margin:5% auto;}

Ссылка здесь: http://jsfiddle.net/folktrash/EQE6K/

источник

2012-03-01 18:00:32 folktrash

Для гибкости, я бы лично использовать CSS градиенты, как они на теле:

background: #2266bb; /* Old browsers */ 
background: -moz-linear-gradient(left, #2266bb 50%, #0fbd60 51%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#2266bb), color-stop(51%,#0fbd60)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, #2266bb 50%,#0fbd60 51%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, #2266bb 50%,#0fbd60 51%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, #2266bb 50%,#0fbd60 51%); /* IE10+ */ 
background: linear-gradient(to right, #2266bb 50%,#0fbd60 51%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2266bb', endColorstr='#0fbd60',GradientType=1); /* IE6-9 */

У вас может быть резервная копия «заднего плана» для старых браузеров.

источник

2014-01-30 15:31:08 BenPog

фоновые изображения растягивающие проблемы

ответ

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