Max Width for Background Image in Header

[shapesnpixels]

I am using Minimum theme and have applied a background to #title-area and display:none to the title text that appeared there. I've made some other tweaks in the CSS to make it display properly on all the responsive variations except the logo doesn't scale when the screen gets narrower than the logo itself.

The image is 600 px wide and it's a background image.

Can we make it scale down when the screen is less then 600px wide?

#header {
	background-position: top center!important;
	margin: 0 auto;
	min-height: 60px;
	overflow: hidden;
	width: 1140px;
}

#title-area {
	float: left;
	overflow: hidden;
	width: 600px;
  background: url('http://www.campkingpits.com/wp-content/uploads/2013/07/Camp-King-Header.gif') no-repeat;
  height: 100px;
}

#title {
	font-family: 'Open Sans', sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	margin: 15px 0 10px;
	text-transform: uppercase;
}

#title a,
#title a:hover {
	color: #3e3e3e;
	text-decoration: none;
  display: none;
}

#description {
	display: none;
}

#header .widget-area {
	float: right;
	width: 500px;
  padding-top: 30px;
}

[Derek]

Try using the background-size: contain: property on the background image when the browser window is less than 600px: http://www.w3schools.com/cssref/css3_pr_background-size.asp

---

Derek Rippe – CSS Artist & Genesis Fanboy @ SynaVista and MediaCairn Design Studio
Figure out your CSS problems with Firebug | Check out my Custom Comment Form Title plugin

[Author]

Posts