Announcement

Collapse
No announcement yet.

Background Image Code Problems

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Background Image Code Problems

    I am trying to add a background image to my site (Executive Template), i have added the following code to Actinic Stylesheet.
    It adds the required background image to my site but it also adds the background image to the content area which i want to keep white which it is before i add the code.

    html,body {
    background-color: #ffffff;
    background-image: url('harrisons2.jpg');
    }

    Please can someone tell me where i am going wrong, and bear in mind i'm new to Actinic.

    Many Thanks

    #2
    Is there a URL to view the site on yet? I would imagine that the table layout for the site does not have a background color defined, so it is effectively see-through and you are looking at the site background.

    If you apply a white background color to the the table, it should solve the problem, however without a URL i cannot say for sure. The code to add the background color is as you have it in your current style. You are just telling these areas to be white which effectively lays white over the top of the background image.

    Comment


      #3
      Thanks Lee,
      The Site is not live yet.

      Is it to much to ask to tell me how and where to add the table background colour.

      Sorry but i'm new to this and am trying to learn.

      Thanks Again

      Comment


        #4
        It's problematic trying to tell you where without being able to see the site as i do not know how it is formed etc. It is a really quick job, just important to do it correctly and in the right place. When you have your hosting in place, pop back in here and provide a URL and one of us will tell you very quickly. It really is a small thing to do, so don't worry about it. You could do a preview and paste into Firefox and use the Firebug addon or alternatively paste your overall layout into here (IN CODE TAGS) and we can take a look.

        Comment


          #5
          Paste the full stylesheet?

          Comment


            #6
            No, the overall layout for your site. This colour is probably going to be applied to your html not your CSS.

            Comment


              #7
              I hope this is what you require.


              HTML Code:
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
              "http://www.w3.org/TR/html4/loose.dtd">
              <html>
              <head>
                 <title><actinic:variable name="PageTitle" /></title>
                 <actinic:variable name="BaseHref" />
                 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                 <meta http-equiv="MSThemeCompatible" content="yes" />
                 <actinic:block if="%3cactinic%3avariable%20name%3d%22MetaKeywords%22%20%2f%3e%20%21%3d%20%22%22" >
              	   <meta name="keywords" content="<actinic:variable name="MetaKeywords" />" />
                 </actinic:block>
                 <actinic:block if="%3cactinic%3avariable%20name%3d%22MetaDescription%22%20%2f%3e%20%21%3d%20%22%22">
              	   <meta name="description" content="<actinic:variable name="MetaDescription" />" />
                 </actinic:block>
                 <actinic:block if="%3cactinic%3avariable%20name%3d%22IsP3PPolicyUsed%22%20%2f%3e"><link rel="P3Pv1" href="<actinic:variable name="P3PFullPolicyLink" />"></actinic:block>
                 <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Contact%20Us%22" >
                    <actinic:variable value="Script for Blocking Unregistered Customers" name="UnregCustomerMessage" if="%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20FALSE" />
                 </actinic:block>
                 <link href="actinic.css" rel="stylesheet" type="text/css" />
              	<style type="text/css">
              	/* Here are some styles to override the default styles that are in the Actinic StyleSheet layout */
              		p, table, td, th {
              			line-height: 150%;
              		}
              	</style>
                 <script language="javascript" type="text/javascript" src="actiniccore.js"></script>
                 <script language="javascript" type="text/javascript" src="actinicextras.js"></script>
              
                 <!-- Placeholder of cookie checking javascript code. Do not remove it! -->
                 <Actinic:COOKIECHECK />
              
                 <script language="javascript" type="text/javascript">
                    <!-- 
                    saveReferrer();
                    // -->
                 </script>
              
              </head>
              
              <body onload="<actinic:variable value="PreloadImages" name="OnLoadScript" />">
              
              <!-- HEADER -->
              <div class="page_header" align="center">
              	<div class="page_header_content">	
              		<div class="page_header_logo_container">
              		<table border="0" cellspacing="0" cellpadding="0">
              		  <tr>
              			<td height="63" valign="middle"><actinic:variable name="BrochureLogoImage" /></td>
              		  </tr>
              		</table>
              		</div>
              		
              		<div class="page_header_terms_cart_login_container">
              			<div class="page_header_terms_container">	
              			<p class="text_terms_conditions"><a href="<actinic:variable name="InfoURL" />" class="link_terms_conditions"><actinic:variable name="InfoText" /></a></p>
              			</div>
              			<table border="0" cellspacing="0" cellpadding="0">
              			  <tr>
              			  	<td><img src="theme_tab1_left.gif" width="4" height="23" alt=" " /></td>
              				<td><div class="page_header_menu_cart"><p class="text_menu_cart"><a href="<actinic:variable name="CartLinkText" />" class="link_cart"><actinic:variable name="CartText" /></a> | <a href="<actinic:variable name="OrderLinkText" />" class="link_cart"><actinic:variable name="CheckOutText" /></a></p></div></td>
              				<td><div class="page_header_menu_cart_items"><p class="text_menu_cart_items"><actinic:variable name="ShoppingCartSummary" value="Shopping Cart Summary In A Line" /></p></div></td>
              				<td><img src="theme_tab1_right.gif" width="4" height="23" alt=" " /></td>
              		<actinic:block if="%3cactinic%3avariable%20name%3d%22AreRegCustomersAllowed%22%20%2f%3e">
              			<Actinic:NOTINB2B>
              				<td class="page_header_menu_cart_login_spacing"><img src="theme_tab1_left.gif" width="4" height="23" alt=" " /></td>
              				<td><div class="page_header_menu_login"><p class="text_menu_cart"><a href="<actinic:variable name="LoginPageURL" />" class="link_cart"><actinic:variable name="LoginText" /></a></p></div></td>
              				<td><img src="theme_tab1_right.gif" width="4" height="23" alt=" " /></td>
              			</Actinic:NOTINB2B>
              		</actinic:block>
              			  </tr>
              			</table>
              		</div>
              	</div>
              </div>
              <!-- END OF HEADER -->
              
              <!-- MAIN MENU -->
              <div align="center">
              <div class="page_menu" align="center">
                <div class="page_menu_content">
              		<div class="page_menu_items"><p class="text_menu" align="left"><actinic:variable value="Home CSS Button" name="NavigationIcon" if="%3cactinic%3avariable%20name%3d%22HomePageType%22%20%2f%3e%20%21%3d%20%270%27" /><actinic:variable value="Sitemap CSS Button" name="NavigationIcon" if="%3cactinic%3avariable%20name%3d%22IsIncludeToSiteMap%22%20%2f%3e" /><actinic:variable name="NavigationIcon" value="Search CSS Button" /><actinic:variable name="NavigationIcon" value="Checkout CSS Button" /><actinic:variable value="Store Top CSS Button" name="NavigationIcon" if="%3cactinic%3avariable%20name%3d%22IsNavBarTopSectionOmitted%22%20%2f%3e%20%21%3d%20TRUE" /><actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22"><actinic:variable value="Up A Level CSS Button" name="NavigationIcon" if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3e%200" /></actinic:block><actinic:variable name="NavigationIcon" value="Contact Us CSS Button" /></p></div>
              		<div class="page_menu_items_search">
                    <div align="right">
              		<actinic:variable value="Quick Search Bar With Larger Button" name="QuickSearchBar" />
              		</div>
              		</div>
              	</div>
              </div>
              </div>
              <!-- END MAIN MENU -->
              
              <!-- MAIN PAGE BODY CONTENT -->
              <div class="page_body" align="center">
              	<div class="page_body_content">
              		<!-- body content left column -->
              		<div class="page_body_content_left_column">
              			<!-- left column section -->
              			<actinic:variable value="Top Level Section List With Horizontal Dividers" name="TopLevelSectionList" if="%3cactinic%3avariable%20name%3d%22IsTopSectionListIncluded%22%20%2f%3e" />
              			<!-- end left column section -->
              			<!-- left column section -->
              			<actinic:variable value="Brochure Nav Bar With Horizontal Dividers" name="BrochureNavBar" />
              			<!-- end left column section -->
              			<!-- left column section -->
              			<actinic:variable value="New Products List With Horizontal Dividers" name="NewProductListSidebar" if="%3cactinic%3avariable%20name%3d%22NewProductsListInSidebar%22%20%2f%3e" />
              			<!-- end left column section -->
              			<!-- left column section -->
              			<actinic:variable value="Sidebar Best Sellers List With Horizontal Dividers" name="BestSellerListSidebar" if="%3cactinic%3avariable%20name%3d%22BestSellersListInSidebar%22%20%2f%3e" />
              			<!-- end left column section -->
              		</div>
              		<!-- end body content left column -->
              		<!-- body content right column -->
              		<div class="page_body_content_right_column">
                    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e" >
                       <!-- When logged in, this gives the company name, username and a login link -->
                       <actinic:variable name="NowServing" /><actinic:variable name="CurrentAccount" /><actinic:variable name="LogoutSimple" />
                    </actinic:block>
                       <div align="center">
                          <actinic:variable name="HeaderFooter" value="Header Text" />
                       </div>
                       
                       <actinic:variable name="INNERLAYOUT" />
                       
                       <div align="center">
                          <actinic:variable name="HeaderFooter" value="Footer Text" />
                       </div>
              
                       <actinic:variable name="ReferrerLink" />
              
              		</div>
              		<!-- end body content right column -->
              	</div>
              </div>
              <!-- END MAIN PAGE BODY CONTENT -->
              
              <!-- PAGE FOOTER -->
              <div class="page_footer" align="center">
              	<div class="page_footer_content">
              	<div class="dotted_line_blue"><img src="theme_shim.gif" height="1" width="1" alt=" " /></div>
              	<p class="text_footer"><span class="text_menu_no_space">© 2007 <actinic:variable name="CompanyName" /></span>&nbsp;  <a href="<actinic:variable name="SendMailPageLink" />" class="link_footer"><actinic:variable name="SendMailText" /></a> | <a href="<actinic:variable name="InfoURL" />" class="link_footer">Privacy Policy</a> | <a href="<actinic:variable name="InfoURL" />" class="link_footer"><actinic:variable name="InfoText" /></a></p>
              	</div>
              </div>
              <!-- END OF PAGE FOOTER -->
              
              </body>
              </html>

              Comment


                #8
                My God that is a pain to read when not live, such a bad idea asking you for that . Might be some trial and error here, but some good news is that you are actually changing things in the stylesheet not the code, as it appears to be predominantly a CSS layout.

                Try adding your white background color to these styles in your stylesheet:

                <div class="page_body">
                <div class="page_body_content">

                See if that does it.

                Comment


                  #9
                  Lee, you are a genius sir ........

                  There is just one part where the background image should'nt be and that is in the footer of the page (where the copywright info is).

                  Any Ideas?

                  Comment


                    #10
                    Add it into here also and see if that solves that part:

                    <div class="page_footer"

                    If that doesn't solve it, then remove it and add it into here instead:

                    <div class="page_footer_content"

                    Comment


                      #11
                      Lee, i have struggled for days trying to sort that.

                      Thank you very much for your time and patience, i really appreciate that.

                      Regards
                      Alan

                      P.S
                      I have one more problem i need to sort, is it ok to post here or should i start a new thread?

                      Comment


                        #12
                        If it is along the same lines and will add to this thread, then do it in here, if not then start a new thread. We are trying to get this forum cleaned up so answers can be easily found. If it's an issue in it's own right, then new thread and relevant title please.

                        Comment


                          #13
                          Sorry Lee, me again...........

                          There is one other bit i have just noticed, its the same problem with the menu bar just below the header.

                          There is a picture in my other post which came after this one, which i would really appreciate your help with in plain english like you did with this post.

                          Many Thanks Again

                          Alan

                          Comment


                            #14
                            Hi Alan

                            Try either of these:

                            <div class="page_header"
                            <div class="page_header_content"
                            <div class="page_header_logo_container"

                            Try the top one first, think that is the one and just try the others if that doesn't do it all for you.

                            Given that you have changed this many styles now, we should have really wrapped the whole layout in a <div> and applied the colour to that. I'm still not quite getting why actinic have not done this though, its pretty much the standard way of doing things nowadays. Nevertheless, what you have done is also OK.

                            Comment


                              #15
                              Originally posted by Sprogg
                              html,body {
                              background-color: #ffffff;
                              background-image: url('harrisons2.jpg');
                              }
                              Just to annoy the actinic team you can compact the above into :

                              html, body {
                              background: #fff url('harrisons2.jpg');
                              }

                              .. now isn't that neater


                              Bikster
                              SellerDeck Designs and Responsive Themes

                              Comment

                              Working...
                              X