Разделить фон по диагонали на Bootstrap

531
20 мая 2017, 17:01

Возник вопрос, возможно покажется глупым Необходимо разделить фон главной страницы на две части. Два изображения приложил к записи. Разделить именно так как на эскизе. Сетка Bootstrap Вопрос в том, что они не квадратные(вернее квадратные, но часть которая за диагональю без фона). Правая часть - слайдер. Левая просто картинка. Не понимаю как их разместить...пробовал уже по разному. Нужно именно на бутстрап, им пользовался довольно редко..

Буду бесконечно благодарен за любую помощь!

Answer 1

Вот так 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	  <meta name="viewport" content="width=device-width, initial-scale=1"> 
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
	  <style>  
           .container{ 
           	width:100%; 
           	position: relative; 
           } 
           .container:after{ 
           	content: ""; 
           	position: absolute; 
           	display: block; 
           	top:0; left:0; right:0; bottom:0; 
           	background: linear-gradient(-51deg, transparent 63%, #AF9CFF 0); 
           } 
           img{ 
           	width:100%; 
           	max-height: 100% 
           } 
 
	  </style> 
</head> 
<body> 
	<div class="container"> 
		<div class="row">  
		 <img src="http://classpic.ru/wp-content/uploads/Devushka-v-golubom-plate.jpg" alt="" class="img-responsive">  
		</div> 
	</div> 
</body> 
</html>

Answer 2
background-image: url(images/bg.jpg); /* Путь к фоновому изображению */
background-color: #f3f3f3;

Вот и все... А вот тут еще больше информации по этому поводу ТУТ.

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10
READ ALSO
получить значение get
HTML

получить значение get

есть такой код

 236
Прокрутить страницу не на 100px а на 100vh
HTML

Прокрутить страницу не на 100px а на 100vh

Приветствую

 478
Создание перелистывания (слайдера меню)
HTML

Создание перелистывания (слайдера меню)

Добрый день, У меня есть проблема не могу разобратся каким плагином или как при помощи css и javascript(jquery) сделать такой эффект как тут показано...

 347
Помогите вывести данные в html из json
HTML

Помогите вывести данные в html из json

Есть API на стороннем сервисе, нужно вывести json данные в читаемом формате с разделителями https://wwweobot

 324