Can’t make my stupid background scroll . . .

  • devblog · Member ·

    I can’t change the header size without changing the content size as well

    Yes, you can. If you create a background image for #page using a technique similar to faux columns, you should be able to achieve the results you want.

    I can’t give you more details right now, but at lunch time I’ll have more time and I will explain in more detail.

  • vivianpaige · Member ·

    Hey devblog – if you are going to be around a bit more, we can add a tag for you, too :) If we do that (let’s call it devlook) you can subscribe to the RSS feed for it and answer the tough questions, like this one. Would you be willing to do that?

  • jt4breakfast · Member ·

    Can’t wait! Thanks.

  • devblog · Member ·

    Vivian,

    Thanks, but let’s wait to see if I’ll be able to be around more. If I can, you know I’ll be more than happy to assist.

    BTW, thanks for your compliment on my web app :)

    JT4,

    So you want your blog to look like this, right? Well, let’s modify your CSS code to accomplish this.

    I took the liberty of modifying your header image and created a background image for your contents. You can get them from here:

    http://www.coderlab.us/samples/jt4/header_bg.jpg
    http://www.coderlab.us/samples/jt4/contents_bg.gif

    After you get them, would you please let me know so I can delete the files, and sample page from me server? Thanks

    Now the fun part.

    In your “body” definition you have this:

    background:color:#CE7B02 repeat-x top center fixed;
...
...
background-color:#F1E9CE!important;

    This is incorrect. The syntax of the first line is wrong. You cannot set the value of a property with other properties like that. The correct way would be:

    background: #f1e9ce;

    This will render unnecessary the second property: background-color:#F1E9CE !important;. Oh, and you don’t need the !important rule. Also, I’d recommend you to use shortcuts instead. If you didn’t know background is the shortcut of the background-xxx properties.

    So, I’d recommend you to write your definitions like so:

    body {
	background: #F1E9CE;
	border:none;
	font-size:66%;
	font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
	color:#6F815D;
	text-align:left;
	margin:0;
	padding:0;
}

#page {
	background: #CABDBF url(contents_bg.gif) top left repeat-y;
	width:1000px;
	margin: 0 auto;
	padding: 0;
	clear: both;
	position: relative;
	overflow: hidden;
}

#header {
	height:457px;
	width:1000px;
	background: transparent url(header_bg.jpg) top left no-repeat;
	clear: both;
	margin: 0;
	padding: 0;
}

#content {
	float:left;
	background-color:#CABDBF;
	width:493px;
	overflow:hidden;
	margin: 0 0 0 50px;
	padding:20px 0 0 25px;
}

html > body #content {margin: 0 0 0 100px;}

#sidebar {
	width:227px;
	border-left:1px solid #896A70;
	margin:0 0 0 637px;
	padding:10px 0 20px 25px;
}

#footer {
	text-align:right;
	clear:both;
	height:50px;
	margin-right: 100px;
	padding:20px 15px 0 0;
}

    Those are the only definitions you need to modify.

    I’d recommend you also to move “#header h1” and “#header .description” below the “#header” definition. Even though it doesn’t matter where you define your elements, it’s more organized and easier to find them later.

    Those are the changes you need to make in order to make your blog look the way you want. I tested the code in Firefox 3 and IE6, so you should be okay with those browsers. Although I haven’t tested it in Safari nor Opera, I’m bet it’ll look good in those too.

    On a side note, I’m glad that wp.com is finally allowing the use of child selectors… sometimes IE6 can be a real pain and child selectors help to work around the “headaches” IE provides.

    HTH

  • devblog · Member ·

    sorry, I linked to your blog instead of my sample. Here’s the link to the sample page:

    (URL deleted – Hanni)

  • jt4breakfast · Member ·

    Genius! Thanks so much, this was giving me the biggest headache ever! *Bows down*

    I’ve got the photos so you can go ahead and delete them from your server. Thanks again.

  • devblog · Member ·

    No problem, jt4.

    Would a staff member please delete the URL to the sample page in me post above? Thanks.

1 2
  • The topic ‘Can’t make my stupid background scroll . . .’ is closed to new replies.