Не удается вставить фоновое изображение

Я пытался обновить свой сайт и испытываю трудности с реализацией изображения на фоне сайта.Не удается вставить фоновое изображение

Я попытался создать два divs, по одному для каждой стороны (так как я хочу, чтобы результат был image1 - позволяет называть его leftbg.png, затем содержимое посередине, за которым следует изображение2 - позволяет называть его rightbg.png справа).

Так что я поставил дивы в теле так:

<body> 
    <div id="leftbg"> 
     <div id="rightbg"> 
      content 
     </div> 
    </div> 
</body>

И в файле CSS у меня есть:

#leftbg { 
float: left; 
width: 22.5% (body is 55%); 
background: url(images/leftbg.png) no-repeat; 
z-index: 999 
}

Однако это не производит ничего. Я думаю, это может быть из-за того, что мой код тела уже содержит фон, и я попытался поместить z-индексы, так что мой класс leftbg будет доминирующим над классом body, однако я знаю, что z-индексы имеют много проблем.

Это тело кода CSS:

body { 
font:11px "Trebuchet MS", Arial, sans-serif; 
color:#666; 
background:maroon url(image/backgrd.png); 
z-index: 0; 
}

Любая помощь будет принята с благодарностью!

источник

2014-10-09 Anonymous

Почему бы 'body' быть на 55%? '# leftbg's 22.5% width означает, что это 22.5% от ширины его родителя, в данном случае' body'. Я не вижу 'body {width: 55%}'. – PHPglue

А я пытался понимать 22,5% всего. Как мне это сделать? –

Попробуйте установить height на номер #leftbg. Пример:

#leftbg { 
float: left; 
height: 80px; 
width: 22.5%; 
background: url(images/leftbg.png) no-repeat; 
z-index: 999 
}

источник

2014-10-09 00:10:23

Я предлагаю реструктуризации вашего HTML, как это:

<div class="bgs"> 
    <div class="bg left"></div> 
    <div class="bg right"></div> 
</div> 

<div class="fake-body"> 
    <h1>Hello World!!!!!!!!!!!!!</h1> 
</div>

Затем вы можете сделать что-то подобное с помощью CSS:

.bgs{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: green; 
} 

.bg{ 
    position: absolute; 
    width: 50%; 
    height: 100%; 
    top: 0; 
} 

.bg.left{ 
    left: 0; 
    background-color: red; 
} 

.bg.right{ 
    right: 0; 
    background-color: blue; 
} 

.fake-body{ 
    position: absolute; 
    top: 0; 
    left: 0; 
}

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

JSFiddle

источник

2014-10-09 00:19:37

Я работаю прилично! Он получил изображения на тех позициях, которые я хотел, что было мило, но это не соответствовало тому, что я хотел. Я играю с ним сейчас. –

Прохладный, напишите еще один jsfiddle, если вы не можете понять это, и я посмотрю. –

Я не могу заставить его правильно выровнять, следует ли использовать другую форму позиции, например «position: initial или position: relative»? –

Не удается вставить фоновое изображение

ответ

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