내용을 고정 폭으로 설정하고 DIV 배경을 확장합니다. (CSS)

나는 이것을 위해 모든 곳에서 수색했지만 아무 것도 발견하지 못했다. 나는 HTML과 CSS가있는 초보자입니다.내용을 고정 폭으로 설정하고 DIV 배경을 확장합니다. (CSS)

기본적으로 래퍼, 탐색, 로고, 내용 및 바닥 글이 있습니다. 본문에 고정 된 배경 이미지를 추가하고 div를 반투명하게 만들었습니다. 내 div는 약 1152px, 여백 자동 및 배경 이미지를 포함하는 반투명 배경색의 고정 너비가 있습니다. 내가 원하는 것은 div의 투명한 배경색을 양쪽으로 확장하여 화면의 전체 너비를 덮고 모든 내용을 고정 폭으로 유지하는 것입니다. 여기

내가 뭘 원하는지의 예입니다 http://electricladystudios.com/ 내용, 탐색 바, 로고, 모든 특정 폭의 중심에 있지만, 배경은 그 폭을 넘어입니다.

이 내 HTML 본문입니다 :

<body> 
<div id="wrapper"> 

<div id="logo"> <img src="logo.png"></div> 
<div id="nav"> 
    <ul id="navbar"> 
     <li><a href="blank">HOME</a></li> 
     <li><a href="blank">ABOUT</a></li> 
     <li><a href="blank">STUDIO</a></li> 
     <li><a href="blank">GALLERY</a></li> 
     <li><a href="blank">DEMOS</a></li> 
     <li><a href="blank">BLOG</a></li> 
     <li><a href="blank">CONTACT</a></li> 
    </ul> 
</div> 

</div> 

<div id="content"> 
<h1>Something </h1> 

</div> 

<div id=footer> 
<p>WEBPAGE MADE BY ME lol</a></p> 

</div> 

</body>

그리고 (내가 여기에서 반복 것들을 많이 알고이 내 CSS이지만,이 자신에 의해 코딩에서 내 첫 번째 시도이고, 난 그냥 해요 코드를 최적화하기 전에 모든 것이 올바르게 보이도록 노력하십시오.) 제발, 저를 참아주십시오.

@charset "utf-8"; 
/* CSS Document */ 

body { 
background-image:url(bg2.jpg); 
background-repeat: no-repeat; 
background-position:center center; 
background-attachment:fixed; 
color: white; 
font-family: Arial; 
font-size: 1 em;} 

#wrapper { 

width: 1152px; 
background: rgba(0, 0, 0, 0.8); 
margin: auto; 
margin-top: 20px; 
padding: 30px; 
height: 100px; 
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75); } 

#logo { 
display: inline-block; 
width: 40%; 
float: left; } 

#nav { 
width: 52%; 
display: inline-block; 
text-align: right; 
float: right; 
padding: 20px; 
margin-top: 5px; 
margin-bottom: 75px;} 


#navbar li { 
font-size: 12px; 
display:inline; 
padding: 12px; } 


#navbar li a { 
text-decoration: none; 
color: white; 
-o-transition:.5s; 
-ms-transition:.5s; 
-moz-transition:.5s; 
-webkit-transition:.5s; } 

#navbar li a:hover { 
color: #0062A4; 
transition: .5s; } 

a { 
text-decoration: none; 
color: #0062A4; 
-o-transition:.5s; 
-ms-transition:.5s; 
-moz-transition:.5s; 
-webkit-transition:.5s;} 

a:hover { 
color: #C33; 
transition: .5s; } 



#content { 
clear:both; 
width: 1152px; 
margin: auto; 
margin-top: 20px; 
margin-bottom: 20px; 
padding: 30px; 
height: 800px; 
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75); 
background: rgba(240, 240, 240, 0.6); 
color: #333; 
font-family: Arial;} 

#footer { 
width: 1152px; 
background: rgba(0, 0, 0, 0.8); 
text-align: right; 
color: grey; 
margin:auto; 
padding:5px; 
padding-left: 30px; 
padding-right: 30px; 

box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75); 
font-size: 75%; }

어떤 도움을 주시면 감사하겠습니다. 감사

출처

2014-01-08 Dasch

가 고정 된 배경을 방법은 이것이다 :

background: url(images/Hero.jpg) no-repeat center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

출처

2014-01-08 23:15:48 user43506

body { 
background-image:url(bg2.jpg); 
background-repeat: no-repeat; 
background-attachment:fixed; 
color: white; 
font-family: Arial; 
font-size: 1 em;}

이

background-size:100% 100%;

을 추가 및 제거

background-position:center center;

출처

2014-01-08 23:22:08 AvrilAlejandro

나는 그것을 할 수 있었다. 이것은 제가 사용했던 방법입니다 :

div의 나머지 부분에 부과 된 테두리를 제거하기 위해 본문에 여백 0을 적용했습니다. 그런 다음 div의 모든 div를 감싸고 부모 div에 100 % 너비와 투명 배경색을 준 다음 자식 div의 내용 너비를 지정했습니다. 결과는 반투명 한 검은 색 배경이 내용이 동일한 div 안에 있지만 고정 너비로 유지되는 동안 페이지의 전체 너비를 차지합니다. 과 같이 : Heres는

#outwrap { 
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75); 
background: rgba(240, 240, 240, 0.6); 
width: 100%; } 

#content { 
width: 1152px; 
margin: auto; 
padding: 30px; 
color: #333; 
font-family: Arial; }

jsfiddle에 대한 간단한 데모 :

http://jsfiddle.net/Dasch/fK5aB/

출처

2014-01-09 22:16:03 Dasch

내용을 고정 폭으로 설정하고 DIV 배경을 확장합니다. (CSS)

답변

관련 문제