Фоновое изображение обрезано (два изображения бок о бок)

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

Вы можете увидеть его на codepen: (как вы можете видеть, левое изображение выталкивается слишком далеко влево, за его пределами контейнерной) http://codepen.io/anon/pen/EPVXBK

И по какой-то причине я получаю большое пространство между изображениями в браузере: https://www.dropbox.com/s/uts7xbmulpcrmqd/page1.png?dl=0

HTML:

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" type="text/css" href="final.css"> 
</head> 

<body> 
    <header id="navbar"> 
    2222222222222222222222222222 
    </header> 
    <div id="all"> 

    <div id="sideNav"> 
    <ul> 
    <li><a class="menu" href="#"><a></li><hr> 
    <li><a class="menu" href="#"> Account<a></li><hr> 
    <li><a class="menu" href="#"> Live Events <a></li><hr> 
    <li><a class="menu" href="#"> Football<a></li><hr> 
    <li><a class="menu" href="#"> Baseball<a></li><hr> 
    <li><a class="menu" href="#"> Soccer<a></li><hr> 
    <li><a class="menu" href="#"> Basketball<a></li><hr> 
    <li><a class="menu" href="#"> Hockey<a></li><hr> 
    <li><a class="menu" href="#"> MMA<a></li><hr> 
    <li><a class="menu" href="#"> eSports<a></li><hr> 
    <li><a class="menu" href="#"> Tennis<a></li><hr> 
    <li><a class="menu" href="#"> Cricket<a></li><hr> 
    <li><a class="menu" href="#"> Golf<a></li><hr> 
    <li><a class="menu" href="#"> Badminton<a></li><hr> 
    <li><a class="menu" href="#"> Handball<a></li><hr> 
    <li><a class="menu" href="#"> Rugby<a></li><hr> 
    <li><a class="menu" href="#"> Snooker<a></li><hr> 
    <li><a class="menu" href="#"> Table Tennis<a></li><hr> 
    <li><a class="menu" href="#"> Volleyball<a></li><hr> 
    </ul> 
    </div> 

    <section id="container"> 

    <section id="left"> 
    <div id="sec1">kdjskdkasd</div> 
    </section> 
    <section id="right"> 
    <div id="sec2">32939282</div> 
    </section> 
    <div id="sec3">dsjkjdsakjdkajads</div> 

    </section> 

    </div> 
</body> 

</html>

CSS:

header{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 50px; 
    background-color: #00a087; 
    } 

/* Sidebar */ 

#sideNav{ 
    width: 130px; 
    float: left; 
    display: inline; 
    margin-top:42px; 
    padding: 0; 
    max-height:80em; 
    background-color:#00a087; 

} 
.menu { 
    line-height:50px; 
    border-bottom: 1px solid black; 
    color:#fff; 
    border:1px dotted black; 
    display:block;} 

ul{ list-style-type: none; margin:0; padding:0.5em;} 
a{text-decoration: none;} 

a:hover{ 
    background-color:#fff;} 

/* holds sidebar and content */ 
#all{ 
    position:fixed; 
    left:0; 
    right:0; 
    max-height:128em; 
    } 

/* holds all center content */ 

#container{ 
    margin-top: 3em; 
    margin-right: 8em; 
    margin-left: 8em; 
    max-height: 64em; 
    display:flex; 
} 

/* Left and Right columns*/ 

#right{ 
    border:1px dotted red; 
    float: right; 
    width: 51em; 
} 
#left{ 
    float: left; 
    width: 51em; 
} 

/* sec1 is left container 
    sec2 is right container */ 

#sec1{ 
    background: url('https://www.dropbox.com/s/yq2v35frxg5cywm/football2.jpg?raw=1') no-repeat left fixed; 
    text-align:center; 
    -webkit-background-size: auto; 
    -moz-background-size: auto; 
    -o-background-size: auto; 
    background-size: auto; 
    min-height: 62em; 
     width:100%; 
    float:left; 
} 

#sec2{ 
    background: url('https://www.dropbox.com/s/yq2v35frxg5cywm/football2.jpg?raw=1') no-repeat right fixed; 
    -webkit-background-size: auto; 
    -moz-background-size: auto; 
    -o-background-size: auto; 
    background-size: auto; 
    text-align:center; 
     min-height:62em; 
    float:right; 
    width: 100%; 
}

источник

2015-12-13 Calisto

Как что ?:

http://codepen.io/anon/pen/LGpjpL

Оставьте вне left и right в background правил и установить background-size: cover;

источник

2015-12-13 00:46:11 Johannes

Эй, не так. Я не планирую использовать этот образ два раза, поэтому мне нужно, чтобы изображения отображались на 100%. Я хотел бы, чтобы левое изображение было выровнено в левой части его контейнера (вместо того, чтобы быть сдвинутым слишком далеко влево, где оно заканчивается отключением) – Calisto

Я хотел бы, чтобы оба изображения были перенесены в осевую линию , где встречаются оба контейнера/обертки. см.: https://www.dropbox.com/s/uts7xbmulpcrmqd/page1.png?dl=0 – Calisto

Я предполагаю, что проблема каким-то образом связана с настройкой 'display: flex' окружающего' # container', но я знайте немного об этом гибком материале, чтобы дать вам хороший совет. – Johannes

Итак, вы хотите, чтобы показать полный размер и выравнивание по правому краю или оставил? Тогда вы должны использовать:

background-size: contain; 
background-position: left; //or right

источник

2015-12-13 01:03:53

Где его добавить? Я попытался использовать его в правой колонке и в левой колонке. Я также пробовал это в сек1 и сек2. – Calisto

Можете ли вы Photoshop быстрый визуальный того, что вы пытаетесь достичь (с использованием двух различных изображений) так понятнее ответ можно дать?

источник

2016-01-07 14:20:48 coreysimons

Фоновое изображение обрезано (два изображения бок о бок)

ответ

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