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
Post a Comment