CSS3 - Width:100% - Height:Auto - Background-image?

Question

My question is very simple...i would like to have a background-image where my logo sits in the middle.

Example: Example website

I think its not that hard to make but i can't seem to get it done...

I want the background-image to fill the entire width (always) and i want the height to adjust in proportions. (responsive) just as in the example.

For some reason my code isn't doing that.

• check my site

Could someone help me out? How do i put an image as background that fills the entire width and auto height with my logo on top of the image.

Regards, Michaël

Answer 1

Assign the body a background like so:

 body{
        background-image: url('../img/yourimagefilename.jpg');
        background-position: top center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #343433;
        height: 100%;
    }

Answer 2

This is another way of creating a hero banner with a background image that covers the viewport width:

http://codepen.io/anon/pen/IknKF

HTML

<div class="hero">
 <img src="http://zerostrikes.com/demo/momentum/images/bg-1.jpg" alt="" />
 <div class="logo">
  <h1>LOGO</h1> 
 </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.hero img {
  width: 100%;
}

.logo h1 {
  position: absolute;
  top: 300px;
  right: 50%;
  color: white;
}

That should allow you to have a responsive image as a background. In order to make the site truly responsive as the example you mention above read about media queries. Here's a good tutorial from Smashing Magazine that explains the basics of media queries:

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Answer 3

first, take <div class="background"> outside your header.

then in your CSS, add this:

.background{
    background:url('http://www.md-esign.be/images/hdbg.png') 50% 50% no-repeat;
    height:400px;
    background-size:cover;
}