проблемы растяжения фонового изображения - PullRequest
Новая
       18

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

0 голосов
/ 01 марта 2012

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

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

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

Я нашел в Google и нашел одно решение.Решение, которое я реализовал, состоит в том, что я разработал одно изображение с цветами 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; 
}

Ответы [ 3 ]

0 голосов
/ 01 марта 2012

Я бы хотел сделать что-то подобное.

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/

0 голосов
/ 30 января 2014

Для гибкости я бы лично использовал такие градиенты 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 */

Тогда вы могли бы иметь запасной вариант "background-image" для старых браузеров.

0 голосов
/ 01 марта 2012
  1. Удалите #bg div, который вы создали для фона
  2. Создание изображения высотой 1px на 3000 + px в ширину. Разделите изображение пополам так, чтобы правая и левая стороны были теми цветами, которые вы хотите
  3. установить тег body в css на background: url(path/to/your/image) repeat-y center top;
  4. Отпразднуйте, вы закончили
...