CODEWITHSUNDEEP
cssbackground-image
David Gard
David Gard

Reputation: 12047

Automatically reduce the size of a background-image set via CSS when there is not enough width

The header on my website contains an image set as the background, with the HTML output as below -

<div id="header-container">
    <div class="inner">
        <h1>
            <a title="Go home..." href="http://home_url">Blog title</a>
        </h1>
    </div>
</div>

The method works just fine, but I'm having issues with mobile devices as my header image is 432px wide.

Because of this I need to amend the code below so that the image reduces in size should the available width of #header-container .inner be less than the width ofthe background image.

I've tried several things, including using background-size: cover; and max-width, but I cannot seem to find a working combination.

How can I overcome this issue?

Here is a JS Fiddle showing the issue. Just reduce the size of the rendered view to see that the image does not shrink.

And here is the CSS that I am using -

#header-container .inner h1{
    background:                 transparent url(res/title-white.png) no-repeat center left;
    -moz-background-size:       432px auto;
    -webkit-background-size:    432px auto;
    background-size:            432px auto;
    height:                     85px;
    margin:                     0;
    width:                      432px;
}
#header-container .inner h1 a{
    display:        block;
    height:         85px;
    text-indent:    -9999px;
    width:          432px;
}

Upvotes: 2

Views: 598

Answers (4)

Asons
Asons

Reputation: 87191

You should use background-size: contain, not background-size: cover, in combination with min/max-width.

Change your CSS like this.

#header-container .inner h1{
    background: transparent url(http://apps.gwtrains.co.uk/apklibrary/wp-content/themes/apklibrary/images/logo-white.png) no-repeat center left;
    background-size: contain;
    height: 85px;
    margin: 0;
    max-width: 432px;
}

Sample snippet

#header-container{
  background-color: #053525;
	border-bottom: 1px solid #4DC386;
	padding: 10px 20px;
	position: relative;
  width: 100%;
  box-sizing: border-box;
}
#header-container .inner{
	margin: 0 auto;
	max-width: 1000px;
	position: relative;
}

#header-container .inner h1{
	background: transparent url(http://apps.gwtrains.co.uk/apklibrary/wp-content/themes/apklibrary/images/logo-white.png) no-repeat center left;
	background-size: contain;
  max-height: 85px;
	margin: 0;
	max-width: 432px;
  position: relative;
}
#header-container .inner h1:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 20%;
}
<div id="header-container">
	<div class="inner">
		<h1>
		</h1>
	</div>
</div>

Upvotes: 1

ThisClark
ThisClark

Reputation: 14823

You can force this by avoiding the background image altogether as you replace it with a regular image in the <img> tag. Layer containers of content (one with the image and another with text) on top of each other with absolute position and z-index. It's a workaround to the background image problems I've experienced similar to yours and the layers provide nice flexibility for managing content.

#z1 {
  z-index: 1;
}
#z2 {
  z-index: 2;
  padding: 5%;
  color: white;
}

#z1, #z2 {
  position: absolute;
  left: 0px;
  top: 0px;
}
<div id="outer">
  <div id="z1">
    <img width="100%" src="http://www.verolago.com/blog/wp-content/uploads/2013/11/sailboat.jpg" />
  </div>
  <div id="z2">
    <p>I'm on a boat!</p>
  </div>
</div>

Upvotes: 0

Mahbub Hasan
Mahbub Hasan

Reputation: 451

You can use media queries for mobile devices. Like: 

 @media all and (max-width: 540px){
  #header-container .inner h1{
    -moz-background-size:       260px auto;
    -webkit-background-size:    260px auto;
    background-size:            260px auto;
    width: 280px;
  }
  #header-container .inner h1 a{
    width:          260px;
  }
}

Upvotes: 0

AVAVT
AVAVT

Reputation: 7133

@media query might help here:

#header-container .inner h1{
    background:                 transparent url(res/title-white.png) no-repeat center left;
    background-size:            432px auto;
    height:                     85px;
    margin:                     0;
    width:                      432px;
}

@media (max-width: 432px){
    #header-container .inner h1{
        background-size: cover;
    }
}

Upvotes: 0

Related Questions