Элемент с фоновым изображением не видно

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

Я даже не могу получить div, чтобы показать его стиль, определенный в css в голове. Если кто-то может просто указать очень быстро, div id #bg_cityscape не появляется, ваши небольшие усилия будут иметь большое значение для того, чтобы помочь мне.

<html lang="en"> 
<head> 
<meta charset="utf-8"> 
    <style type="text/css"> 
    .hero_container{width:960; display: inline-block;} 
    #hero_intro{width:960;} 
    #bg_cityscape{ width:50%; background-image: url(<!--filepathreoved//-->);} 
    #white_bar{background-color: white; width: 30%;} 
    #portrait{;} 
    #signature{;} 
    #whitebar_text{;} 
    </style> 
</head> 
<body> 
    <div class="hero_container"> 
     <div id="bg_cityscape"> 
     </div> 
    </div> 
</body> 

</html>

EDIT Решено !!!! Спасибо, парни! Я не уверен, какой из предложений сделал это, но теперь он работает! Я обновлю сообщение после того, как выясню, определяет ли он фиксированную высоту или любую высоту на фоновом изображении, содержащем div; или единиц измерения на контейнерах в CSS.

источник

2015-05-20 Andrew

Вы должны установить высоту '# bg_cityscape', я прочитал, что вам нужно изображение, чтобы быть в процентах. Вы можете использовать свое изображение внутри тега ''? Это может быть возможным решением. –

Вы должны объявить height для div и добавить position:

#bg_cityscape { 
    width:50%; 
    height:50%; 
    position:absolute; 
    background-image: url(https://www.google.com/images/srpr/logo11w.png); 
}

JSFiddle Demo

источник

2015-05-20 00:28:13 imbondbaby

Мне нужно, чтобы изображение было в процентах. – Andrew

также, ваше решение не работает в моем коде. Например, если я просто изменяю ширину от 50% до 500 пикселей, я все равно оставляю пустое окно. – Andrew

Обновлено @ AndÚ – imbondbaby

Вы должны обеспечить измерение единиц измерения ширины свойства по .hero_container и #hero_intro DIVS.

.hero_container{width:960px; display: inline-block;} 
#hero_intro{width:960px;}

Добавить значение height для #bg_cityscape, а также (однако большое вам это нужно быть).

#bg_cityscape{ width:50%; background-image: url(/*image url*/); height: 200px;}

источник

2015-05-20 00:33:53

добавлен блок измерений, все еще ничего – Andrew

Это работает для меня. Линия «граница» предназначена только для отображения региона.

<html lang="en"> 
<head> 
<meta charset="utf-8"> 
    <style type="text/css"> 
    .hero_container{width:960; display: inline-block;} 
    #hero_intro{width:960;} 
    #bg_cityscape{ 

     border:1px solid #00ff00; /* Show the region */   
     width:50%; 
     background-image: url('http://dreebies.com/wp-content/uploads/2013/05/free-pattern-renaissance-sprin.png');} 

    #white_bar{background-color: white; width: 30%;} 
    #portrait{;} 
    #signature{;} 
    #whitebar_text{;} 
    </style> 
</head> 
<body> 
    <div class="hero_container"> 
     <div id="bg_cityscape"> 
      Test 
     </div> 
    </div> 
</body> 

</html>

источник

2015-05-20 00:34:11 Zeal

спасибо, я могу видеть размеры объекта, но я фон-изображение: url(); все еще не работает. по крайней мере, теперь я знаю, что div печатает. хорошее мышление – Andrew

Добро пожаловать! Это немного странно, поскольку с помощью кода выше я могу увидеть фоновое изображение из Safari и Firefox. Возможно, вы можете просто скопировать код в новый текстовый файл, используя расширение .html, а затем повторите попытку. – Zeal

Если вы не имеете содержание в <div id="bg_cityscape"></div> вам необходимо указать высоту.

JSFiddle Demo

источник

2015-05-20 00:34:21

добавлена высота, еще ничего. – Andrew

@ И вы добавили блок для высоты? Я заметил в вашем коде, что вы не указали единицы (px?) Для ширины –

Элемент с фоновым изображением не видно

ответ

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