By crazyben21 on

I'm having weird effect with html/css. I can't manage to get my background image to appear. I tried background-image:url('images/back.gif'), background-image:url('../images/back.gif'), and background-image:url(images/back.gif). I also tried jpg and jpeg images. Nothing to seems to work. I use firebug and something weird is happening to that background image. Nothing in the class e_content is affecting it in any way. 


<div class="e_content" style="background-image:url('images/back.gif'); background-repeat:repeat">
      
      <?php if ($mission) { ?><div id="mission"><?php print $mission ?></div><?php } ?> 
        <?php print $breadcrumb ?>
        <?php if($title) { ?><h1 class="title"><?php print $title ?></h1><?php } ?>
        <div class="tabs"><?php print $tabs ?></div>
        <?php if ($show_messages) { print $messages; } ?>
        <?php print $help ?>
        <?php print $content; ?>
        <?php print $feed_icons; ?>      
 	     	     
</div>

This is the website under maintenance http://store.e-written.com . I do know background-color work though. But I want to keep it as a background-image in case in the future I will overwrite the back.gif image to something else.

If I don't find a fix I guess i have to go with background-color.

Thank You
Benjamin Betancourt

⋅ Categories: Drupal 6.x

Comments

Poieo’s picture

Poieo commented

You really should be calling that image from your style.css rather than inline.

With that said, you can't use the same url as you would in the stylesheet because your page is relative to the root of your site, not your theme.

Try this:

background-image: url("/sites/store.e-written.com/themes/storee-written/images/back.gif");
crazyben21’s picture

crazyben21 commented

ok I will try this. But why does the body background-image works. It's works on the normal page when not on maintenance.

Thank You
Benjamin

crazyben21’s picture

crazyben21 commented

Tried:

background-image: url("/sites/store.e-written.com/themes/storee-written/images/back.gif");

It Works. Your the Man. Just wondering why background-image: url('images/back.gif') is working on others parts of the main page. I guess I will start changing my codes so it this won't happen again. First time it happen to me now though. I was always using just background-image:url("image/andaimage.jpg");.

Thanks You. You the man. :)

Poieo’s picture

Poieo commented

I'm not sure...

You really shouldn't be using inline styles like you are here. Instead of putting the style in the page, you should have:

.e_content {
  background-image: url(images/back.gif);
  background-repeat: repeat;
}

in your stylesheet. You aren't using proper coding standards and you could be penalized, although probably minimal, by the search engines for it. The bigger deal, is if you want to use that background image again somewhere else, you have to put in another inline style rather than just adding a class to the div.

Then, down the road, let's say you need to change the name of that image. You would have to change it everywhere you've placed it inline. If it's in the stylesheet, you only have to change it one place.