CSS выровнять два фоновых изображения в отдельных div - PullRequest
Новая
       7

CSS выровнять два фоновых изображения в отдельных div

0 голосов
/ 02 декабря 2018

Итак, у меня есть два погружения друг под другом, и я хотел бы выровнять 2 фоновых изображения.Оба изображения одинаковы, но высота различна.(второе изображение должно повторять instelf (в идеале должен быть javascript, который загружал бы его при прокрутке).

Так что я смог выровнять изображения, но масштабирование - проблема (фиксированный размер сейчас).

Кто-нибудь знает, как это сделать?

Вот мой код до сих пор 

@extends('layouts.application')

@section('styles')

<style type="text/css">

	.bgimage{
		background-image: url('{{ asset('/images/bg/logo.png') }}');
		background-attachment: fixed;
		position: relative;
    	background-position: left;
		background-position: left;
		top: 0;
		left: 0;
		background-color: white;
		width: 100%;
		height: 100vh;
	}

	.image {
		background-image: url('{{ asset('/images/bg/stripe.png') }}');
		background-attachment: fixed;
		position: relative;
    	background-position: left;
		background-repeat: repeat;
		top: 0;
		left: 0;
		background-position: left;
		background-color: white;
		width: 100%;
		height: 50vh;


	}

</style>

@endsection

@section('layout-content')

<div class="bgimage" > </div>
<div class="image"> </div>

<!--/End Footer -->

@endsection

@section('scripts')
 

@endsection

Спасибо, спасибо

1 Ответ

0 голосов
/ 02 декабря 2018

Я не уверен, получил ли я требование полностью, но вот попытка:

https://jsfiddle.net/wkjys4cu/1/

.outer-container {width: 900px;position: relative;}
.box {
  width: 50%;
  height: 250px; 
  background-image: url('https://www.w3schools.com/cssref/img_tree.gif');
  background-repeat: no-repeat;
  position: absolute; 
  top: 0; 
  left: 0;
}

.box1 {
  outline: 1px solid black;
  background-size: 50% 50%;
  background-position: 50% 60%;
}

.box2 {
  outline: 1px solid red;
  background-size: 50% 75%;
  background-position: 20% 80%;
}
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>
  <div class="outer-container">
    <div class="box box1"></div>
    <div class="box box2"></div>
  </div>
</body>
</html>
...