0

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.

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

Improve this question
1
  • 1
    Please update your question with the relevant code. Commented Aug 19, 2014 at 21:26

3 Answers 3

Reset to default
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%;
    }
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Please mark my question correct if you choose to, by clicking the check mark.
while body is the usual answer, in your case is wrong, because he wants to target the div named .background which is only 400px height, not the complete page
and again it won't work, because he needs to first remove the .background div from the header element and position outside it whether it's before or under it, depending on his needs. Also, background-attachment:fixed is not needed if you have background-size:cover
Yes, my height is only 400px idd...could you explain me why .background can't be inside the header?
1

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/

Improve this answer

1 Comment

Works but when you minimize the browser, your absolute .logo h1 text will be float outside the image into the text or antything beneath the img...
0

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;
}
Improve this answer

3 Comments

Why must it be outside of my header?
because if you make that div 400px height, then your header will stretch to 400px height. I assume you want to have your header OVER the background, but if not, like in example having the whole header using the background and 400px height, then in my code you need to change .background to header
Just asking but...whats the difference in using: header{background-image;} or just take the .background div out of my header. They 'look the same... And why is my text on top of my image when i but a background image on my header? Is a background-image not seen as some kind of block? Does stuff get on top of that "layer"?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.