Как применить минимальную ширину на фоне div?

<div style="background: url(http://netdna.webdesignerdepot.com/uploads/2013/11/picjumbo.com_IMG_3130.jpg) no-repeat center center; 
 
    background-size: 100%; min-width: 700px; height: 100%; width: auto;"> 
 

 
    <p> 
 
    I DO NOT WANT THIS CONTENT TO BE AFFECTED BY THE MIN-WIDTH. I just want the background to take on min-width. I hope that makes sense.</p> 
 

 
</div>

Вот мой Fiddle:

https://jsfiddle.net/y0bdLgzL/2/

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

Любая помощь в том, как правильно организовать divs и классы, чтобы помочь сделать это, было бы очень полезно.

источник

2016-10-27 Brian Breeden

Какова ваша цель, всегда иметь полную ширину? Я не думаю, что есть чистый способ установить минимальную ширину на фоновое изображение из-за того, что это часть элемента. Один из способов: использование: с позиции: абсолютное, чтобы иметь больше контроля или что-то вроде этих трюков: http://stackoverflow.com/questions/16679221/how-to-set-a-minimum-width-with-background-size – degers

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

См. Мое предложение выше. Но самым простым способом было бы добавить дочерний элемент для ширины текста max-width. – degers

Поскольку вы не можете дать фоновое изображение min-width, вы можете использовать псевдоэлемент, например.

Updated fiddle

.bkg { 
 
    position: relative; 
 
    height: 100%; 
 
    width: auto; 
 
} 
 
.bkg::before { 
 
    content: ''; 
 
    position: absolute; 
 
    background: url(http://netdna.webdesignerdepot.com/uploads/2013/11/picjumbo.com_IMG_3130.jpg) no-repeat center center; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    min-width: 700px; 
 
    height: 100%; 
 
} 
 
.bkg p { 
 
    position: relative; 
 
}

<div class="bkg"> 
 

 
    <p> 
 
     I DO NOT WANT THIS CONTENT TO BE AFFECTED BY THE MIN-WIDTH. I just want the background to take on min-width, not the content. I hope that makes sense.</p> 
 

 
    </div>

источник

2016-10-27 17:47:48 LGSon

По какой-то причине он работает просто отлично, но я могу буквально скопировать и вставить его в файл html/css, и фон вообще не появится. –

@BrianBreeden Затем опубликуйте этот код html/css, и я посмотрю – LGSon

Это скрипка: https://jsfiddle.net/zhLcskuo/ Это действительно расстраивает. Мои локальные файлы в буквальном смысле (с добавлением и т. Д. Точно так же. Я могу изменить изображение в течение всего дня, но он не отображается.> = ( –

Вы могли бы достичь этого результата, используя ::before псевдо элемент, что-то вроде этого:

<div class="wrapper"> 
    <p> 
     Lorem ipsum solor dit amet 
    </p> 
</div> 

.wrapper { height: 100%; position: relative; width: auto; } 
.wrapper::before { background: url('img/bg.png') 0 0/100% 100% cover; content: ''; min-width: 700px; left: 0; position: absolute; top: 0; }

Размер по .wrapper::before и фон будет следовать!

источник

2016-10-27 17:42:16 giorgio

Я собирался удалить свой ответ, когда Я видел, что вы отправили его, пока я написал мой, но так как ваш не работает должным образом, я останусь как есть. – LGSon

почему именно он не работает? – giorgio

Нужно ли мне отвечать на это? ... Сделать образец фрагмента или скрипку и проверьте сами себя – LGSon

Как применить минимальную ширину на фоне div?

ответ

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