css background cover images

So ..css background cover images

Я сделал изображение css, чтобы оно покрывало весь фон моего сайта, а затем на HTML я добавил картинку. Изображение есть, но я не вижу его, потому что он покрыт css фоном.

CSS

{ 
margin: 0; 
padding: 0; 
} 

html, body, #bg, #bg table, #bg td, #cont { 
height:100%; 
width:100%; 
overflow:hidden; 
} 

#bg { 
position: relative; 
} 

#bg div { 
height:200%; 
left:-50%; 
position:absolute; 
top:-50%; 
width:200%; 
} 

#bg td { 
text-align:center; 
vertical-align:middle; 
} 

#bg img { 
margin:0 auto; 
min-height:50%; 
min-width:50%; 
} 

#cont { 
position:absolute; 
top:0;left:0; 
z-index:70; 
overflow:auto; 
} 

.box { 
margin: 0 auto; 
width: 400px; 
padding: 50px; 
background: white; 
padding-bottom:100px; 
font: 14px/2.8 Georgia, Serif; 
}

HTML

<!DOCTYPE html> 
<html> 

<head> 


<meta charset="utf-8"> 



<title>Full Page Background Image | CSS #1</title> 



<div style="background: url (C:\Users\***\Desktop\site\picture.png; z-index:1"> 
<img src="C:\Users\*****\Desktop\site\picture.png" position:relative; left:-20px;/> 
</div> 

<style> 

    img.bg { 
     /* Set rules to fill background */ 
     min-height: 100%; 
     min-width: 1024px; 

     /* Set up proportionate scaling */ 
     width: 100%; 
     height: auto; 

     /* Set up positioning */ 
     position: fixed; 
     top: 0; 
     left: 0; 
    } 

    @media screen and (max-width: 1024px){ 
     img.bg { 
      left: 50%; 
      margin-left: -512px; } 
    } 

#page-wrap { position: relative; width: 400px; margin: 50px auto; padding:  20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; } 
    p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; } 
</style> 
</head> 

<body> 

<img src="images/bg.jpg" class="bg"> 

<div id="page-wrap"> 

text 


</div> 

</body> 

</html>

Любые предложения ... спасибо

источник

2013-05-26 user2422719

НЕПРАВИЛЬНО ..u нужно сделать поместить как этот – swapnesh

Вам нужно взять DIV из головы, где вы попытались вставить изображение перед тегами стиля. Не размещайте содержимое тела в заголовках веб-сайта. – Kristy

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

источник

2013-05-26 17:22:09

<div style="background-image:url('image.jpg');"} 
<img src="image2.jpg" position:relative; left:-20px;/> 
</div>

источник

2013-05-26 17:42:10

Измените индекс z на фоновое изображение на 0, а 99 - на изображение, которое будет отображаться. Это можно сделать с помощью:

(background id) { 
    z-index: 0 } 
(image id) { 
    z-index: 99 }

Это должно принести изображение «над» фоном.
Надеюсь, что это помогает :)

источник

2014-05-21 19:00:12

css background cover images

ответ

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