PDA

View Full Version : Multiple BG?


redViper
May 2nd, 2010, 08:18 PM
UPDATE
So I've updated the HTML & CSS to what I have now. Basically I made the header the top image and just repeated the background.

But now if I shrink my browser size (to show for 1024 for example) the backgrounds get all wonky. Also the background doesn't fit 100% it's like a pixel off and I can't figure out why. thoughts?

I'm also assuming you guys need to see BG's so I've attached the header bg and the page bg.

----/end update


I tried to see if this was already posted, but I'm not exactly sure how to phrase it so hopefully someone can help!

I'm building a site (as you can see in the attached image) I have what's ABOVE the black line as the body bg. It has no-repeat on it.

Now, everything below the line needs to be repeated vertically.

I tried to do it in a container div but that didn't work, unless I'm doing it wrong.

Here's the code I have ATM:


body {
font-family: HelveticaNeue, "Helvetica Neue", Arial, Verdana, sans-serif;
background: url(images/bg.png) top center repeat-y;
}


img {
border: 0px;
}

#container {
width: 1077px;
margin-left: auto;
margin-right: auto;
}

#header {
position: relative;
margin-left: auto;
margin-right: auto;
padding: 10px 0 0 60px;
width: 1077px;
height: 200px;
background: url(images/header_bg.png) no-repeat;
}

#navcontainer {
padding: 10px 0 0 0;
}


#nav a {
color: #fff;
text-decoration: none;
}

#nav a:hover {
text-decoration: underline;
}


#nav li {
color: #fff;
display: inline;
list-style-type: none;
margin: 0 20px 0 0;
text-transform: uppercase;
font-weight: bolder;
font-size: .9em;
}










<!DOCTYPE html>

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>The Punch In - Your Television News Service</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>
<div id="container">

<div id="header">
<a href="http://www.thepunchin.com"><img src="images/logo.png" title="The Punch In" /></a>

<div id="navcontainer">
<ul id="nav">
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Tips</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>


<div id="left">
</div>

<div id="right">
</div>

<div id="footer">
</div>

</div>

</body>
</html>
Jedisloth
May 3rd, 2010, 09:26 AM
just a bit of advice. when using a background image like you have, rather take that grey your using and use it as a html color --> background-color:#d6d6d6;

then take out the grey in your images and save as png again.
the reason your bg.png is going wonky when you resize the browser is because you are inserting it in the body of the html and not inside your container.

you can just copy and paste the code i fixed it for you already :)


body {
font-family: HelveticaNeue, "Helvetica Neue", Arial, Verdana, sans-serif;
background-color:#d6d6d6;
margin:0px;
padding:0px;
}


img {
border: 0px;
}

#container {
width: 1077px;

/*Change this height to 100% the moment you insert content in it*/
height:1000px;
/*You can just use margin: auto; instead of margin-left and right*/
margin:auto;
background: url(images/bg.png) top repeat-y;
}

#header {
position: relative;
margin: auto;
padding: 10px 0 0 60px;
width: 1077px;
height: 200px;
background: url(images/header_bg.png) no-repeat;
}

#navcontainer {
padding: 10px 0 0 0;
}


#nav a {
color: #fff;
text-decoration: none;
}

#nav a:hover {
text-decoration: underline;
}


#nav li {
color: #fff;
display: inline;
list-style-type: none;
margin: 0 20px 0 0;
text-transform: uppercase;
font-weight: bolder;
font-size: .9em;
}if you wanna fix that one pixel alignment you will have to go edit the images and make sure they line up there.

hope this helps :)
redViper
May 3rd, 2010, 10:08 AM
ahhh!
thank you so much. much appreciated.
now let's see what happens when I start adding columns and stuff.

I might have more questions..!!!
Jedisloth
May 3rd, 2010, 10:10 AM
its a pleasure! great, feel free to post them :)
redViper
May 16th, 2010, 06:49 PM
Ahoy hoy.
So... I have an issue.

The designing went great and so I just decided to go straight to Wordpress. I did all the steps.. and now when I upload the theme it just goes blank. When I check to see if anything loads ('View Page Source') it's just blank.. so I don't know what the issue is.

I've attached Index.php any ideas??


<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>The Punch In - Your Television News Service</title>
<meta name="description" content="All the latest news and gossip from the world of Television" />
<meta name="keywords" content="television, news, tv news, gossip, tv gossip, ctv, cbc, global tv, twitter, city tv, hgtv, hgtv canada, global reality channel, tvtropolis, nbc, fox, abc, cbs, reality tv, drama, comedy, production assistant, tv writer, writers, directors, call sheets, producers, executive producer, los angeles, toronto, new york, vancouver, production, production secretary, production manager, casting producer, casting, award shows, emmy awards, mtv movie awards, vma, mmva, muchmusic video awards, muchmusic, justin beiber, genie awards, gemini awards" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<?php if ( is_singular() ) wp_enqueue_script ( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>

<body>
<div id="container">

<div id="header">

<?php get_header(); ?>

</div>

<div class="clear"></div>

<div id="navcontainer">

<?php include("nav.php"); ?>

</div>
</div>


<div id="contentcontainer">

<div id="content">

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<div <?php post_class() ?>>
<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>

<?php if ( has_post_thumbnail() ) :?>
<div class="post-thumb">
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a>
</div>
<?php endif; ?>

<?php the_content(''); ?>
<ul class="meta">
<li><?php the_time('F jS, Y') ?></li>
<li>Posted in <?php the_category(', ') ?></li>
<li><?php comments_number('No Comments', '1 Comment', '% Comments'); ?></li>
</ul>
</div>

<?php else : ?>

<h1>Nothing Found</h1>
<p>Sorry, but you are looking for something that isn't here.</p>
<p><a href="<?php echo get_option('home'); ?>">Return to the homepage</a></p>

<?php endif; ?>


</div>

<div id="right">

<?php get_sidebar(); ?>

</div>

</div>
<div class="clear"></div>


<div id="footer">

<?php get_footer(); ?>

</div>

</div>

</body>
</html>