Làm thế nào để thêm hai hình ảnh nền - trái và phải từ cột trung tâm

Question

Tôi có css này:

#wrapper1 { 
min-width:1020px; 
min-height:100%; 
} 
#wrapper2 { 
height:100%; 
background: url('img1.jpg') -100px 300px no-repeat, url('img2.jpg') 1165px 300px no-repeat; 
} 
#wrapper3 { 
width:1020px; 
margin:0 auto; 
} 

và html này:

<div id="wrapper1"> 
<div id="wrapper2"> 
    <div id="wrapper3" class="clearfix" <!-- content here --> 
     <p>blah blah blah</p> 
    </div> 
</div> 
</div> 

tôi cần phải thêm 2 hình ảnh - trái và phải từ cột trung tâm không có thay đổi chiều rộng cột trung tâm và hình ảnh không ảnh hưởng đến chiều rộng tổng thể của trang. Ví dụ:

tôi có thể thêm hình ảnh, và thực hiện một số nỗ lực

1. khi tôi cố gắng để thay đổi độ rộng của trình duyệt - hình ảnh nền đi dưới cột trung tâm

2. Tôi đã cố gắng thay đổi min-width:1020px; to min-width:1665px; - ngay từ cái nhìn đầu tiên, tất cả đều tốt, nhưng đối với độ phân giải màn hình - nhỏ hơn 1665px, tất cả nội dung được chuyển sang bên phải Tôi đã thử một vài lựa chọn nhưng không thành công

Câu hỏi của tôi: сan tôi đặt một hình ảnh để khi bạn thay đổi độ rộng của trình duyệt - giảm khoảng cách bên trái và bên phải của cột trung tâm (đây là mặc định hành vi nếu không có hình ảnh nền)

Here is code with images examples.

Nếu tôi làm cho 1 hình ảnh lớn với 1020px phần trung tâm trống và đặt hình ảnh trái/phải của tôi vào nó .. nó sẽ làm việc?

Answer 1

Bạn có thể làm theo bội số giải pháp:

1) Sử dụng divs: [tốt]

Tạo một "khung" tốt của các div có thể LVE vấn đề của bạn, ví dụ như một cái gì đó như thế này:

<div id="allWrapper"> 
<div id="leftSidebar"></div> 
<div id="centerOrContent"></div> 
<div id="rightSidebar"></div> 
</div> 

Và một giả của CSS (không kiểm tra):

div#allWrapper{ 
width: 100%; 
heigt: 100%; 
} 
div#leftSidebar{ 
min-width: [theWidthOfLeftImage] px; 
height: 100%; 
background-image: url(leftImage.jpg); 
backround-position: center right; 
} 
etc... 

Sau đó chơi với CSS (nổi và kích cỡ), bạn có thể điều chỉnh quan điểm.

2) Sử dụng nhiều nền: [phải lúc nào cũng tốt]

Bạn có thể sử dụng CSS giả này để sử dụng bội số nền (tìm thấy ở đây: http://www.css3.info/preview/multiple-backgrounds/)

div#example1 { 
width: 500px; 
height: 250px; 
background-image: url(oneBackground), url(anotherBackground); 
background-position: center bottom, left top; 
background-repeat: no-repeat; 
} 

3) sử dụng tĩnh " hình ảnh lớn: [giải pháp lười biếng]

Sử dụng hình ảnh tĩnh như bạn đề xuất (có khoảng trống ở giữa) cũng có thể giải quyết được sự cố, nhưng nếu ebsite là "đáp ứng", bạn có thể có vấn đề đồ họa với độ phân giải màn hình khác nhau (hoặc thay đổi kích thước cửa sổ trình duyệt). Trong trường hợp này, bạn phải sửa vị trí và chiều rộng của cột trung tâm quá (khi thay đổi kích thước cửa sổ).

4) sử dụng thiết kế đáp ứng: [! Tuyệt vời - làm điều đó]

Để tránh chồng chéo của hình ảnh trên (nội dung) div trung tâm, bạn có thể thiết lập như là background-color (của div này) màu trắng.

Một lần nữa, để tránh trùng lặp, bạn có thể đặt CSS đáp ứng "đặc biệt". Điều đó phát hiện nếu các cửa sổ có chiều rộng < X 2 hình ảnh biến mất. Ví dụ với CSS này giả:

@media only screen and (min-width: 481px) { 
//here happens something when the screen size is >= 481px 
div#example { 
    background-image: url(oneBackground); 
} 
} 

@media only screen and (max-width: 481px) { 
//here happens something when the screen size is <= 481px 
div#example { 
    background-image: none; 
} 
} 

Dưới đây một số liên kết được tìm thấy trên các trang web về thiết kế đáp ứng:

http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

Answer 2

Bạn có thể sử dụng hai DIV tuyệt đối với hai hình nền. Một trung tâm bên trái và một trung tâm khác nằm ở giữa:

Đặt các DIV bất cứ nơi nào bạn muốn trong trang web. (Họ đang hoàn toàn vị trí)

HTML:

<div class="background" id="background1"></div> 
<div class="background" id="background2"></div> 

CSS:

.background{ 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: -1; 
} 

#background1{ 
    background: url(yourImage1.jpg) no-repeat 100% 0; 
} 

#background2{ 
    background: url(yourImage2.jpg) no-repeat 0 0; 
}