Extending background to accomodate content. Help please?

"Extending background to accommodate content. Help please?", 30th Apr 2012, 12:13 AM #1

Posts: 4

Referrals: 0

Registration date: 29th Jul 2011

Location: Canada

Okay so. I have spent the last several hours trying to find a tutorial or guide on how to do this specific thing but have come up empty handed, so I will post my question here.

Situation:

I have a layout which I selected from the list of available ones, which I have been modifying as I go to properly display the way/colors/images that I want it to. I do not know very much HTML/CSS and have been grabbing what I can from guides and tutorials and patching it in, so I have VERY rudimentary understanding of how any of it actually works.

Problem:

I have a background image that I want to use. This background image is exactly the right size to frame my comic as seen here: http://displaced.thecomicseries.com/comics/ However when I use this for the other pages, the content is often longer than the actual image (such as on the cast page). As such, I learned that I needed to cut the images into segments in order to have a "middle" which can loop itself and stretch automatically to the size of the text/content on that page. I cut the image in three, with the looping bar just at the bottom of the background character's feet. I do not want to have my content stretching vertically beyond the actual frame of the image, so I need to stretch the image vertically down so that it will display correctly.

That being said, I have absolutely no idea how to actually edit my layout to implement this. I tried playing with the header but I had it hidden because it displays text (which I do not want but do not know how to get rid of without screwing myself, as the text is already on the background image itself, so I don't need the extra bland, white text). Help please!

Overall HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>    
</script>
    
  <!-- Last Update: [lastupdatedmy] -->
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss/" />
  <title>[webcomicname] | [pagetitle]</title>
  <style type="text/css">
   <!--layout:[css]-->
  </style>
  <script type="text/javascript" src="http://comicfury.com/cflayoutjs.js.php"></script>
 </head>
 <body>
<div id="header">
	<h1><a href="/" title="[webcomicname]">[webcomicname]</a></h1> 
	<span id="slogan">[webcomicslogan]</span>
</div>



<div id="navigation">

	<ul id="nav">

     <li><a href="/comics/">Latest</a></li>
     <li><a href="/comics/first">First</a></li>
     <li><a href="/archive/">Archive</a></li>
     <li><a href="/blog/">Blog</a></li>
     <!--cond:[searchon]-->
      <li><a href="/search/">Search</a></li>
     <!--end_cond:[searchon]-->
     <!--loop:[extrapages]-->
      <li><a href="[l:link]">[l:title]</a></li>
     <!--end_loop:[extrapages]-->
     <!--cond:[n:hidefromhost]-->
      <li><a href="[addsubscriptionlink]">Subscribe</a></li>
     <!--end_cond:[n:hidefromhost]-->
	</ul>

</div>


   <div id="wrap">
    <!--[if lte IE 7]>
     <table id="wrapie"><tr><td>
    <![endif]-->


     <!--cond:[isextrapage]-->
	<div id="title">
		<h2>[pagetitle]</h2>
	</div>

	<div class="center">
		<div class="textcontent">
			<p>
     <!--end_cond:[isextrapage]-->

     <!--layout:[content]-->

     <!--cond:[isextrapage]-->
			</p>
		</div>
	</div>
     <!--end_cond:[isextrapage]-->

   <!--cond:[bannerads]-->
    <!-- voluntary CF support ads, you can turn these off in your webcomic settings -->
    <div id="cf_ads">[banneradcode]</div>
   <!--end_cond:[bannerads]-->

    <!--[if lte IE 7]>
     </td></tr></table>
    <![endif]-->
   </div>
<!--footer-->
<div id="footer">
Artwork &copy; Jenna Dion & Shawn Bohall | Writing &copy; Jenna Dion & Shawn Bohall | Creative Consultation &copy; Evelyn. | Comic &copy; [copyrights] | Hosted on <a href="http://comicfury.com">ComicFury</a><br />
<a href="/rss/">RSS</a> |
<!--cond:[n:hidefromhost]-->
 <a href="[comicprofile]">Comic Profile</a> | 
<!--end_cond:[n:hidefromhost]-->
<a href="#">Top</a><br />

</div>
<!--footer end -->


 </body>
</html>

Layout CSS

body {
margin: 10px;
background: #3D3D3D url("http://Displaced.thecomicseries.com/files/backgroundimageroujaxwhole_copy.png") top no-repeat;
font-size: 62.5%;
font-family: Lucida Sans Unicode, lucida grande, verdana, sans-serif;
color: #AAAAAA;
text-align: center;
min-width:650px;
}

img {
border: 0px;
}

a {
color: #C84446;
text-decoration: none;
text-transform: uppercase;
}

a:hover {
color: #44A4C8;
cursor: default;
}

h1, h2, h3, h4, h5 {
font-family: lucida grande, lucida sans unicode, verdana, sans-serif;
line-height: 1em !important;
font-weight: normal;
margin: 0px;
padding: 0px;
}

#header {
 visibility: hidden;
 padding: 20px;
}

#header h1 {
font: 4em century gothic, lucida sans unicode, lucida grande, sans-serif !important;
color: #ffffff;
text-transform: uppercase;
width: 720px;
margin: auto;
text-align: center;
}

#header h1 a {
color: #ffffff;
}

#header h1 a:hover {
color: #ffffff;
}

#header:hover {
color: #ffffff;
background: #000000;
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
}

#cf_ads {
 display:table;
 margin:7px auto;
 text-align:center;
}

#slogan {
 color:#BBB;
}
#navigation {
margin: 50px;
margin-left:30px;
margin-right:30px;
}

#nav {
padding: 0px;
margin: 0px;
list-style-type: none;
}

#nav li {
display: inline;
margin:0;
padding:0;
}

#nav li a {
display: inline-block;
background: #A1A1A1;
padding: 5px;
margin: 1px;
font: 1.5em century gothic, lucida grande, verdana, sans-serif;
color: #ffffff;
border: 1px solid #3D3D3D;
}

#nav li a:hover {
background: #3D3D3D;
border: 1px solid #A1A1A1;
}

html>/**/body #wrap {/*hide from ie7 and below - they don't support display:table, so they get an actual table*/
margin: auto;
width: 720px;
display:table;
}
#wrapie {
margin: auto;
width: 720px;
}

#contentwrap {
margin: auto;
width: 560px;
text-align: center;
}

.comicnav {
margin: 0px;
padding: 0px;
list-style-type: none;
}

.comicnav li {
display:inline;
margin: 10px;
text-align: center;
font-family: century gothic, ms sans serif, geneva, lucida sans unicode, lucida grande, sans-serif;
font-size:2em;
}

.comicnav li a {
color: #A1A1A1;
}

.comicnav li a:hover {
color: #ffffff;
}

.post {
}

.rating {
    max-height: 0;
    visibility: hidden;
}
.comment, .permalinks {
margin-top: 10px;
background: #222222;
opacity: 0.95;
-moz-opacity: 0.95;
filter: alpha(opacity=95);
font: 1.2em lucida grande, lucida sans unicode, verdana, sans-serif;
}

.comment:hover, .rating:hover, .post:hover, .permalinks:hover {
opacity: 1.0;
-moz-opacity: 1.0;
filter: alpha(opacity=100);
}

.comment {
min-height: 100px;
height:auto !important;
height: 100px;
}
.reply {
 margin-left:20px;
}

#comicnavigation, .permalinks {
padding: 10px;
}

.commentheader {
background: #1B1B1B;
padding: 5px 5px 2px 5px;
color: #3d3d3d;
text-align: right;
}

.avatar {
float: left;
margin: 10px 10px 5px 10px;
padding: 1px;
border: 1px solid #a1a1a1;
}

.avatar:hover {
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
}

h4 {
font-size: 0.9em;
color: #A3A3A3;
text-align: left;
}

h2, h3 {
font-size: 1.5em;
text-align: justify;
text-transform: uppercase;
}

h2 {
color: #AAAAAA;
}


h2 a {
color: #AAAAAA;
}

.commentcontent {
padding: 2px 20px 5px 20px;
text-align: left;
min-height: 100px;
height:auto !important;
height: 100px;
}

h3 {
color: #AAAAAA;
}

.editdelete {
font-size: 0.8em;
}

#footer {
background: #1B1B1B;
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
font: 0.9em lucida grande, lucida sans unicode, verdana, sans-serif;
color: #ffffff;
padding: 20px;
margin: 10px auto;
}

#footer:hover {
opacity: 1.0;
-moz-opacity: 1.0;
filter: alpha(opacity=100);
}

#title {
background: #1B1B1B;
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
padding: 20px;
margin: 10px auto;
}

#title:hover {
opacity: 1.0;
-moz-opacity: 1.0;
filter: alpha(opacity=100);
padding: 20px;
}

.commentheadings {
padding: 15px;
margin: 10px auto;
width: 500px;
}

h5 {
color: #ffffff;
font-size: 2.4em;
text-transform: uppercase;
}

.textcontent {
padding: 20px;
margin-top: 10px;
font-size: 1.3em;
text-align: left;
}

table {
font: 1.3em lucida sans unicode, verdana, sans-serif;
}

#months {
padding: 0px;
margin: 20px 0px 0px 0px;
list-style-type: none;
}

.textcontent h3 {
text-align: center !important;
}

.chaptertitle {
 text-align:center;
 color:#888;
}
.chaptertitle h3 {
 color:#555;
}
#searchbar {
 text-align:center;
}
#searchbar input {
 border:1px solid black;
 color:black;
 background-color:white;
}
#searchbar input.submit {
 background-color:#EFEFEF;
}
.center {
 text-align:center;
}
.permalinkcode {
 width:90%;
 border:1px solid black;
}

30th Apr 2012, 7:09 AM #2

Kyo

I got to choose mine
User avatar

Posts: 6890

Referrals: 0

Registration date: 6th Jul 2008

Location: Germany

uhm, try something like:

.textcontent {
background-color:#the-color-of-your-choosing-here;
}

also it would be nice in the future if you could wrap long passages of code in code tags, and spoiler tags around those

_______________________

hello

30th Apr 2012, 5:52 PM #3

Aramena

Posts: 4

Referrals: 0

Registration date: 29th Jul 2011

Location: Canada

Ah, sorry about that. I wasn't aware I should do that (was quite frustrated at the time), but I have edited it now to display as code and spoiler tags.

As for the text area, I don't think that solves my problem per se. If I edit the text area to be the background color I want that would certainly accomplish the very basic of what I want in theory, but the bottom of my background image would not move/extend downward to accommodate text content as well (unless I am wrong, and I may certainly be wrong?). Wouldn't it just stretch the content vertically beyond the image, with a similar color background? I need to loop the image itself (just the center where it CAN be looped).

Will this require me to put the header and footer as both the top and bottom of my spliced image respectively? I have a custom footer which hovers over the rest of the site which I would like to keep if at all possible.

30th Apr 2012, 6:05 PM #4

Kyo

I got to choose mine
User avatar

Posts: 6890

Referrals: 0

Registration date: 6th Jul 2008

Location: Germany

oh, I get it now. You're looking for the background-attachment css value.

Note that this will not stop some of the text from overlapping, if the monitor is taller than the background image accomodates. You could also size the text area a certain height and use the "overflow:auto;" css value, to add a scrollbar to that container

_______________________

hello

30th Apr 2012, 6:26 PM #5

Aramena

Posts: 4

Referrals: 0

Registration date: 29th Jul 2011

Location: Canada

I had thought of the scroll bar method but I am not so fond of on-page scroll bars. I would rather an image which can be looped infinitely downward. I am a little confused by the background image accommodating the monitor though. If the image is set to auto-loop spliced bars to expand the content area before it reaches the footer, wouldn't that just extend the whole page until the end of the content? Sorry, my grasp of CSS is really not great.

30th Apr 2012, 11:41 PM #6

Dodom

Posts: 422

Referrals: 0

Registration date: 6th Sep 2009

Location: Québec

I can think of a way to do it but it's just an idea, I don't know all the exact commands by heart, so I'll just write the main lines here and we'll see if the concept is good at least.

Make the looping part of the image the actual background.
Right after the background-image line, add background-repeat:repeat-y;

So you'd have a whole background of the looping pattern from top to bottom of the page.

In the HTML part, you add the following:
<DIV CLASS="tophalf"><IMG SRC="top-half-of-the-background.jpg"></DIV>

In the CSS part, you need to define the tophalf class:
.tophalf{
position:absolute;
top:0px;
left:50%
margin-left:-500px;
z-index:0;
}
The margin-left value should be half the width of the background image.
Now, I never used the z-index property, I'm not sure it'll behave right. Maybe it'll be necessary to add a superior z-index to the header and other classes that need to stack over it.

If that all works, the top part of the background should cover the first few repeats of the looping part, and it should be inserted behind the page contents.

_______________________

1st May 2012, 1:14 AM #7

Kyo

I got to choose mine
User avatar

Posts: 6890

Referrals: 0

Registration date: 6th Jul 2008

Location: Germany

if you want multiple backgrounds in kind of a hierarchy you can also just have two divs within each other, and give the inner one the repeating background. This is all sort of complicated if you don't use css3 (which isn't universally supported yet, though we're getting there)

_______________________

hello

1st May 2012, 1:44 AM #8

Dodom

Posts: 422

Referrals: 0

Registration date: 6th Sep 2009

Location: Québec

Or tables. Tables can nest too.

_______________________

Forum > Layouts, HTML, CSS & Javascript > Extending background to accomodate content. Help please?

Pages: [1]

Comic Fury Webcomic Hosting - Extending background to accomodate content. Help please?