Can't seem to add a <div> for a background image

ThemeShaper Forums » Thematic

[closed]

Can't seem to add a <div> for a background image

(13 posts)

Started 10 years ago by chris_s
Latest reply from chris_s
This topic is resolved

Tags:

chris_s
Member
Here is what I have setup. I currently have a small background image repeating. In addition, I have a 5x256 color bar that I want to run down the left side of the theme. If someone can shed some light on why this isn't working that would be great. Thanks!

I added this to functions.php
```
// add color bg-side
function side_div() {?>
    <div id="bg-side">
    </div>
<?php }
add_action('thematic_before','side_div');
```
and added this in my style.css
```
#bg-side {
background: url(images/bg-side.jpg) repeat-y;
}
```
Chris
Posted 10 years ago #
helgatheviking
Moderator

#bg-side has no height so you will never see the image. you might be able to adjust the width of the #wrapper div and apply the image there.

Posted 10 years ago #
rscamero92
Member

If your trying to do what I think, try this example......

body {
background:#000000
}
#main {
background-image: url(../../../ThematicChild/images/YOURIMAGE.png);
background-repeat: repeat-y;
}

You my have to play around with your margin settings a little also.

Posted 10 years ago #
chris_s
Member

being an amature sure is frustrating. I should have been using thematic_aboveheader. And when I have a fixed height in there it does show, but how do I get it to run down the full length of the page, as far as it will scroll? I tried height:auto; and that didn't work.

Chris

EDIT: ok, I lied. thematic_aboveheader only pushed everything from the header down... I may have to try that second option there.

Posted 10 years ago #
helgatheviking
Moderator

using thematic_aboveheader() isn't any different than your first attempt. basically you are putting a background that you want to span the whole height of the page on a div that doesn't span the whole height of the page.

if you are trying to create a wrapper around something then you could put the the div opener in thematic_aboveheader and then close the div in thematic_belowheader

Posted 10 years ago #
rscamero92
Member

Is the site your working on "live"?

If so what is the URL? If we could look at it we will be able to help ya out better.

Posted 10 years ago #
chris_s
Member

Sure, it's www.brokeup.com/test. I made the height 256px so you could see the image. Thanks for the help, still trying to get over this learning curve...

@helgatheviking, I'm not sure exactly how to hook that from thematic_aboveheader to thematic_belowheader, but if I wanted it to span the whole height of the page, would it not hook to thematic_after? Just trying to use some logic with the thematic structure.

Chris

Posted 10 years ago #
helgatheviking
Moderator
you aren't understanding. what i was suggesting was to put the beginning of the div at _aboveheader and the end at _belowheader. if you put the whole div before the header it doesn't wrap around any of the other elements, hence no height, hence no background image. and you don't hook from aboveheader to belowheader you just put part of the div on each.
```
function above_stuff(){
echo "<div id='bg-side'>"; //opens
}
add_action('thematic_aboveheader','above_stuff');

function below_stuff(){
echo "</div>"; //closes
}
add_action('thematic_belowheader','below_stuff');
```
though i still hold that the #wrapper div is already in place to do that. put your background tile on the body and the banner graphic on #wrapper.
Posted 10 years ago #
Jamie Mitchell
Member

Helga is right.

you should use the body tag for your main background image repeat, that is how it is done.

and if you want to have the color bar down the left side, use the wrapper, give it a width and margin: 0 auto, and your background: url(yoururl.jpg) repeat-y 0 0;

easy, done...

Posted 10 years ago #
chris_s
Member

Worked just as it should. Thank you for the help.

Posted 10 years ago #
chris_s
Member

Helga, I know this is outside the scope of this thread, but would you mind explaining to me why you used echo in that function, compared to the other function that I used? I understand that you are calling the beginning of the div to in one area and closing it in another. Is echo used for that format, rather than if I was just creating a div within a parent div? I'm still fresh on php but am getting there. Reasoning from people on the forums is more helpful to me sometimes than reading books/online articles.

Posted 10 years ago #
helgatheviking
Moderator
chris- i have never read a book either. just lots of forum questions, tutorials, lord google and persistance (or stubborness depending on how you look at it)

to answer your question...

I used echo so that i would not have to close the <?php tags. it is just a preference i think. i could also have written:
```
function above_stuff(){ ?>
<div id='bg-side'>
<?php }
add_action('thematic_aboveheader','above_stuff');
```
which is similar to what you were doing... and it would (or should) do the same thing. echo is just the php command that says print out what is in the quote marks. there is also a print command and i dont honestly know the difference.
Posted 10 years ago #
chris_s
Member

Ok, thanks for the quick schooling!

Posted 10 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.