Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Eric Conklin
Eric Conklin
8,350 Points

How to code responsive headers with background images.

Hello! I am trying to code a responsive header background that can have a form displayed over top for people to sign up for a webinar. I've saved the image and am referencing it correctly, but it is not showing up.

My strategy is to use a div element with the proper height and width from my PSD, then code it with the form elements inside.

This has, so far, not worked at all. The div will not show up with the background at all.

Here is my html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Sat, 21 Nov 2015 22:11:09 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Event Lander</title>
  </head>
  <body>
  <div class="header-rectangle">
  <h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
  </div>
  <div id="header-bg" align="center">
  <h1>Welcome!</h1>
  </div>
  </body>
</html>

And here is my CSS:

* {
  margin: 0px;
}

.whiteheadline {
    font-size: 48px;
    font-family: "Open Sans";
    color: rgb(255, 255, 255);
    font-weight: bold;
}

.header-rectangle { 
    background-color: rgb(104, 115, 251);
    text-align: center;
    line-height: 143px;
}

#header-bg {
background-image: url:(http://ppc-genius.com/wp-content/uploads/2015/11/EventLander.png);
background-repeat:no-repeat;
height:541px;
background-repeat: no-repeat;
background-color: #ffffff;
background-attachment: fixed;
background-position: top center;
background-size: cover;
position: relative;
 }

I've just barely started coding it. Only the header text shows up, but no header image shows up as the background even though it is CLEARLY coded in the CSS above.

2 Answers

Steven Bister
Steven Bister
12,011 Points

Hi Eric,

If you remove the colon before the brackets and after url in your background-image property that should sort it.

#header-bg {
background-image: url(http://ppc-genius.com/wp-content/uploads/2015/11/EventLander.png);
background-repeat:no-repeat;
height:541px;
background-repeat: no-repeat;
background-color: #ffffff;
background-attachment: fixed;
background-position: top center;
background-size: cover;
position: relative;
 }

Hope that helps!

Eric Conklin
Eric Conklin
8,350 Points

That fixed the image reference. Any idea how I can get my div to stay centered now? It hates me a lot.

Basically I want the full image centered, full resolution and as a background within a div element so I can put other elements in front of it.

Steven Bister
Steven Bister
12,011 Points

Not sure if you've already figured this out and sorry this might not be what you mean, but try setting a margin to 0 auto, display to block and text-align center. I'd also remove the html align property in the header-bg div.

#header-bg {
            background: #fff url("http://ppc-genius.com/wp-content/uploads/2015/11/EventLander.png") no-repeat fixed top center;
            background-size: cover;
            height: 541px;
            position: relative;
            margin: 0 auto;
            display: block;
            text-align: center;

         }

(I've written the background as shorthand, it is exactly the same as your code previously)

Marissa Richardson
Marissa Richardson
47,542 Points
Marissa Richardson
Marissa Richardson
47,542 Points

Wow. This is weird. I'm no CSS genius, but what seemed to work was putting quotation marks around the image URL. I also kept the semicolons and that seemed to work too. These were my mods to your code:

header-bg {

background: url('http://ppc-genius.com/wp-content/uploads/2015/11/EventLander.png'); background-repeat: no-repeat; height: 541px; background-color: #ffffff; background-attachment: fixed; background-position: top center; background-size: cover; position: relative;

}

Sorry. I copy and pasted, so the formatting is weird. (There's suppose to be a '#' at the beginning.)

Steven Bister
Steven Bister
12,011 Points

Ah, this has actually made me do a bit of homework :P and I did not know this:

According to the W3C they're optional; "The format of a URI value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional white space followed by ')'. The two quote characters must be the same."

However if the URL is un-quoted and contains special characters, then they need to be escaped with a backslash. So it's probably good practice to get in the habit of including the quote marks.

Here's a link to the W3C page if you fancy a read: http://www.w3.org/TR/CSS2/syndata.html#value-def-uri

:)

Marissa Richardson
Marissa Richardson
47,542 Points

@Steven Bister

Great research. Thanks for the point and the helpful link. :)