Центрирование цвета фона с помощью css

У меня есть центрированное изображение в фоновом режиме, но мне нужно, чтобы мой основной цвет фона растянулся так же сильно, как изображение, и остался в центре.Центрирование цвета фона с помощью css

Вот CSS для фона тела

body{padding:0; margin:0; background:url(/b.jpg) center 10px no-repeat;}

Вот CSS для основного фона

.main{background:#4e4645;}

Ive пытался фон-позиции и маржинальных процентов не повезло.

источник

2013-02-13 Jeft Lebowski

Покажите свой HTML тоже пожалуйста. –

@BillyMoat его просто нет ...

...

–

Как @Jack Аллен просит, можете ли вы показать нам картину того, как она выглядит прямо сейчас и как вы хотите, чтобы она выглядела? –

Вы можете использовать margin: 0 auto, чтобы центрировать ваш .main div внутри тела. Тогда вам нужно всего лишь установить ширину .main равной ширине фонового изображения вашего тела.

.main { 
    margin: 0 auto; 
    width: 300px; 
    background: #4e4645; 
}

См. DEMO.

источник

2013-02-13 17:33:44 zakangelle

Yup. Спасибо человеку –

@JeftLebowski Просто сказать, что если бы вы хотели, чтобы жидкий ответ, где фон расширяется, чтобы соответствовать изменяющемуся размеру изображения, см. Ниже. – InsomniaBass

Это то, чего вы пытаетесь достичь?

http://jsfiddle.net/aX24s/1/

В примере я использую два цвета фона, очевидно, заменить изображение в. Я поставил 50% непрозрачности на внутренней DIV, чтобы показать, что они оба точно подобраны по размеру (один блок ярко-зеленый, один красный, поэтому цвета смешиваются).

У вас есть два фона одинакового размера и накладываются точно.

HTML:

<body> 
    <div class="outer_div"> 
     <div class="inner_div"> 
     </div> 
    </div> 
</body>

CSS:

.outer_div { 
    width:50px; 
    margin:0 auto; 
    height:50px; 
    background-color:#dd0000; 
} 

.inner_div { 
    background:#00dd00; 
    width:100%; 
    opacity:0.5; 
    height:100%; 
}

источник

2013-02-13 17:37:29 InsomniaBass

Центрирование цвета фона с помощью css

ответ

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