css - How to set a minimum width with background-size -


i have image 1000px x 600px . want use responsive background div set minimum width of 1000px despite how small browser window is.

this frustrating because there doesn't seem simple way define min. width.

if use background-size: cover - reason, image defaulted larger 1000px.

please

if media queries option, can setup media query browser viewports smaller 1000px wide.

assuming html viewport set:

<meta name="viewport" content="width=device-width"> 

and div named 'bg':

<div class="bg"></div> 

in css:

.bg {     width: auto; /* scale div parent width */     height: 900px; /* div needs height visible */     background-image: url(bg.png); /* background image */     background-size: 100%; /* size image width of div */     background-position: top; /* position image top center of div */ }  /* viewports less 1000px wide */ @media (max-width: 1000px) {      .bg {         background-size: 1000px 600px; /* force image minimum width */     }  } 

Comments

Popular posts from this blog

blackberry 10 - how to add multiple markers on the google map just by url? -

php - guestbook returning database data to flash -

delphi - Dynamic file type icon -