CODEWITHSUNDEEP
cssresponsive-design
Morpheus
Morpheus

Reputation: 3523

centering a logo in fluid layouts with a constraint on maximum logo size

I am using yahoo's pure.css layout and I am having some small issues. I have a logo which would replace the heading and i want the logo to be fluid as well(The size changes with the bsize of the browser window).

I am currently using the following:

h1.logo{
  background-image: url('../images/LogoColor287x86.png');
  background-size: 100%;
  text-align: center;
  background-repeat: no-repeat;
  width: 100%;
  float: none;
  padding-top: 29.8%;
  height: 0;
  text-indent: -9999px;
}

This works but the result is not what i want. The above piece of CSS ensures that the logo occupies the maximum size available to it. But I want to to have a maximum size and centered. Say it should be a maximum size of 500px width even though the amount of space(width) available to it is 1000px.

Anyway to constrain the proportions.

Upvotes: 0

Views: 85

Answers (3)

Tanya Sinha
Tanya Sinha

Reputation: 634

put your logo inside a div with css text-align: -webkit-center;

HTML:

<div class="header">   
<h1 class="logo"></h1>
</div>

CSS:

.logo {
   background-image: url('https://images.google.com/intl/en_ALL/images/srpr/logo11w.png');
   background-size:contain;
   padding-top: 29.8%;
   max-width: 50%;
   background-repeat: no-repeat;
}
.header {
   text-align: -webkit-center;
   width:100%;
}

Hope it helps you...

Upvotes: 0

Saiyam Gambhir
Saiyam Gambhir

Reputation: 536

For making the logo center use the property background-position: center center.

Also see jsfiddle: https://jsfiddle.net/Saiyam/7fzfoy43/2/

Upvotes: 2

Brian John
Brian John

Reputation: 599

If I understand your problem correctly, you would like a background image to have a maximum size while remaining centered and scaling correctly when less space is available?

I accomplished this with nested elements - one positioned relative and taking the maximum space available to it. The nested element positioned absolute with the maximum values defined and then taking advantage of

background-size: contain;

See JS fiddle here: http://jsfiddle.net/4bgcokux/2/

Upvotes: 1

Related Questions