Unable to make background image appear

HTML & CSS
1

My HTML page contains the following css:

    body {
	background: #FF0000;
}

#container {
	position: relative;
	margin: 0px auto;
	width: 100%;
}

.header {
	margin: 0 auto;
	width: 960px;
	height:320px;
	background: url(template/header.png) no-repeat left top;
}

.nav {
      width: 685px;
      float: right;
      margin-top: 268px;
      padding: 0;
      list-style: none;
      background-color: #DCD8D8;
}

.nav li {
      float: left;
}

.nav li a {
      display: block;
      padding: 5px 10px;
      text-decoration: none;
      font-weight: bold;
      color: #212121;
}

.nav li a:hover {
      color: #FFFF00;
      background-color: #FF0000;
	  -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
}
	  
#two-col {
	clear: both;
	margin: 0 auto;
	width: 960px;
	background: url (template/text-bg.png);
	background-repeat: repeat-y;
}

.col-one {
	float: left;
	width: 630px;
	margin-left: 80px;
}

.col-two {
	float: left;
	width: 160px;
	margin: 0 40px 0 50px;
}

#footer {
	clear: both;
	margin: 0 auto;
	width: 960px;
	height: 60px;
	background: url(template/footer-bottom.png);
	background-repeat: repeat-y;
}

Everything appears correctly, except the background image in the #two-col div. I’ve been over it a dozen times this evening, and can’t find my mistake. I know the image is in the correct folder.

I’m sure someone will quickly find my mistake, and as always, I thank you ALL for your help!

2

You can’t have a space between url and the parenthesis () in your #two-col CSS.

3

Yep, we are happy to help, but you can also use the CSS validator to help with CSS errors.

Also, don’t forget to wrap your code in code tags next time! Use three backticks (`) top and bottom, or use the code formatting button (</>). :slight_smile:

4

Ryan-

Thank you. It now looks good in the text editor preview, but when I look at it via Google, the background still doesn’t show. I’m sure I’ve done something else wrong!

5

Sorry, ralph…didn’t know there was a CSS validator, and next time I need some help, I’ll be sure to use the code formatting button.

I’m learning, but for me, it’s a SLOW process!

6

If you still aren’t see it you might be seeing a cached version of hte page. CTRL+F5 will clear the cache. Make sure you purge any cache that you have for server caching (cloudfare etc.)

If that doesn’t work then you need to give us a live website or codepen that recreates the issue.

Also what do you mean by “via google”? They probably have an outdated version of your page if you are clicking “view cached version of this page.”

That statement confuses me.

7

After I created it in a text editor, I saved it as a html page, then opened that page in Google (the browser I’m currently using).

Even after clearing the cache, it still doesn’t show up. Since I DID see it in my text editor preview, I’m sure it’s there.

I’ll probably have the rest of the page finished tomorrow, and if needed, I’ll post a link to it.

And I DO appreciate the help!

8

Unless there’s a /template/ folder in the same folder as your CSS file, the background images won’t be forund.

A link would be helpful, if you have one.

You mean Chrome, the browser that Google makes. :slight_smile:

9

It’s here: http://jigsaw.w3.org/css-validator/

You’re probably familiar with the HTML validator, but just in case, here’s the link for that, too: http://validator.w3.org/

10

There is no browser called “Google” :wink: that is where I got my confusion. Google is a search engine.

Please call it “Chrome” since that’s its actual name. As said make suer the image is actually in the template folder (template folder should be in the same folder as your CSS file) and give us a link ASAP.

11

I looked another dozen times, and finally found the mistake:

This is what I had:

#page-bg {
	background: url(template/page-bg.png);
	background-repeat: x, y;
}

This fixed the problem:

#page-bg {
	background: url(template/page-bg.png);
	background-repeat: **repeat**-x, y;
}

Again, thanks to everyone who helped me find the mistake!

12

You can simplify remove that repeat rule. It repeats by default.

1 Like
13

Yes, repeating is automatic, so leave it alone unless you either don’t want it, or only want it in one direction. This line won’t work anyway:

background-repeat: repeat-x, y;

You can only use something like background-repeat: repeat-x; You can’t have a comma-separated list in there.

However, if you do want to set the background to repeat in both directions manually, do it like so:

background-repeat:repeat;

Or as part of your shorthand code:

background: url(template/page-bg.png) repeat;
1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.