Изменение размера фонового изображения div с помощью css

Question

У меня есть фоновое изображение в следующем div.

#logo { 
    margin-top: 15px; 
    min-height: 75px; 
    min-width: 75px; 
    background: url(rotarywheel.png) no-repeat; 
    float: left; 
} 

Я хочу, чтобы изменить размер логотипа DIV в зависимости от размера окна (мобильный, таблетки и т.д.) Как это возможно? Пожалуйста, помогите мне.

Answer 1

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

Answer 2

Заканчивать background-size

Фоновое размер CSS свойство определяет размер фоновых изображений. Размер изображения может быть полностью ограничен или только частично, чтобы сохранить его внутреннее соотношение.

Answer 3

Если вы хотите сделать что-либо зависеть от размера окна, вы, вероятно, захотите посмотреть на media queries. Это модифицируется из примера в верхней части этой страницы:

<!-- CSS media query on a link element --> 
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 

<!-- CSS media query within a style sheet --> 
<style> 
@media (max-width: 600px) { 
    #logo { 
     width: 500px; 
     height: 200px; 
     background-image: url('500-200-bg.png') no-repeat; 
    } 
} 
</style> 

Answer 4

Используйте фон размера CSS свойств

например

background-size:100px 50px; 

Answer 5

Использование фона размер в процентах, и ширина тоже. поскольку у вас одинаковое соотношение ширины и высоты div.

#logo { 
margin-top: 15px; 
min-height:75px; 
min-width: 75px; /*value in percentage or em;*/ 
background: url(rotarywheel.png) no-repeat; 
background-size:25%; /*value in percentage or em;*/ 
float: left; 

}