Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Backgrounds

Discussion in 'Website Design Forum:' started by chrismitchell, Aug 20, 2010.

  1. Ok odd question.. I want to have 2 background images. One over the other. I can get so far but then i'm stuck :p so I appeal to the DF masses to ask for assistance :)

    My background image on the body tag works fine and does a repeat-x as it is a 1px wide gradient. This works great, then I added a div with a calling of a png pattern which I want to repeat both x and y (basically to repeat all over the background gradient), now this works but only for repeat-x not repeat-y. I can't seem to force this to repeat everywhere. I've looked on google etc etc but I can't find anything.

    The CSS is below :)

    Code:
    body {margin: 0;padding: 0;background: #FFFFFF url(images/bg2.jpg) bottom left repeat-x fixed;font: 0.80em Arial, sans-serif; color: #666666; line-height: 18px;}#overbody {background-image: url(images/bgTop.png);background-repeat: repeat-x repeat-y;}
    and this is just calling stuff in the body tag then i've got the Div calling the overbody ID.

    Any help with this would be awesome :D

    Chris
     
  2. Harry

    Harry Senior Member

    Don't specify a repeat if you want it to repeat both axes.

    So repeat x:

    Code:
    element{  background:url(image/path) top left repeat-x;}
    repeat all/both:

    Code:
    element{  background:url(image/path) top left;}
     
  3. Harry

    Harry Senior Member

    Oh and having body and overbody is totally unnecessary, by the way.

    You want this:

    Code:
    html{background: #fff url(images/bg2.jpg) bottom left repeat-x fixed;}body {margin: 0;padding: 0;font: 0.80em Arial, sans-serif; color: #666;line-height: 18px;background: url(images/bgTop.png);}
    :D
     
  4. Harry

    Harry Senior Member

    Updated post above: remove the overbody div and use the new code I gave.
     
  5. nope still seems to only do the repeat-x for me :( very confusing :( does it only show repeat-x for you too Harry?
     
  6. Harry

    Harry Senior Member

    Now apply overflow:hidden; to #wrapper ;)
     
  7. It also seems to not be showing the full width of the bgTop.png either which is odd :(
     
  8. Wooo :D cheers Harry.. I knew I missed something!!! Thanks mate :) works like a treat :D
     
  9. Harry

    Harry Senior Member

    No worries dude, any time :D
     
  10. Harry

    Harry Senior Member

    Also, instead of #fff as your HTML background colour, change it to #b5ce95. This way if (for some reason) your bg image doesn't load the user will still get colour :)
     
  11. Harry

    Harry Senior Member

  12. does the blocks at the bottom not look very good to you Harry? Or is it coming up with syntax errors from your end? :)
     
  13. Harry

    Harry Senior Member

    It looks okay, but it's not very future proof//sensible…

    Y'see you have to manually add a class to each end-item, whereas you could just code it differently from the off and let it take care of itself for evermore :)

    Whack all the items in a <ul id="blocks"> instead of a div, then each inner div becomes an <li> as per the tutorial :)
     
  14. Righto :) well i'll give it a go-ski :D :lol:

    cheers again mate :D
     
  15. Harry

    Harry Senior Member

    I've done this totally blind, but here goes:

    HTML:
    <ul id="blocks"> 
        
        <li>
    		<a href="http://www.mountainchefs.co.uk/inspiredgourmet/contact">
    			<img alt="FFI1" src="http://www.mountainchefs.co.uk/inspiredgourmet/wp-content/themes/inspiredgourmet theme mk2/images/100.gif" style="background: url("http://www.mountainchefs.co.uk/inspiredgourmet/wp-content/uploads/rachel.png") no-repeat scroll center center transparent;">
    		</a>
            <h4><a href="http://www.mountainchefs.co.uk/inspiredgourmet/contact">Get in Touch</a></h4>
            <p><a href="http://www.mountainchefs.co.uk/inspiredgourmet/contact">Got a question? Need some help? Want some advice? Why not contact us?</a></p>
        </li>
        
        <li>
    		<a href="http://www.mountainchefs.co.uk/inspiredgourmet/index.php?cat=3">
    			<img alt="FFI2" src="http://www.mountainchefs.co.uk/inspiredgourmet/wp-content/themes/inspiredgourmet theme mk2/images/100.gif" style="background: url("http://www.mountainchefs.co.uk/inspiredgourmet/wp-content/themes/inspiredgourmet%20theme%20mk2/images/gourmetcourse.jpg") no-repeat scroll center center transparent;">
    		</a>
            <h4><a href="http://www.mountainchefs.co.uk/inspiredgourmet/index.php?cat=3">Inspired Gourmet Blog</a></h4>
            <p><a href="http://www.mountainchefs.co.uk/inspiredgourmet/index.php?cat=3">Read all the latest news on our Blog!</a></p>
        </li>
        
        <li>
    		<a href="http://www.mountainchefs.co.uk/inspiredgourmet/category/recipes/">
    			<img alt="FFI3" src="http://www.mountainchefs.co.uk/inspiredgourmet/wp-content/themes/inspiredgourmet theme mk2/images/100.gif" style="background: url("http://www.mountainchefs.co.uk/inspiredgourmet/wp-content/themes/inspiredgourmet%20theme%20mk2/images/recipes.jpg") no-repeat scroll center center transparent;">
    		</a>
            <h4><a href="http://www.mountainchefs.co.uk/inspiredgourmet/category/recipes/">Recipes</a></h4>
            <p><a href="http://www.mountainchefs.co.uk/inspiredgourmet/category/recipes/">Read some of our sample recipes from our courses.</a></p>
        </li>
        
    </ul>
    Code:
    #blocks{	width:930px;	margin-left:-10px	overflow:hidden;	list-style:none;}#blocks li{	float:left;	width:190px;	margin-left:10px;	padding-left:110px;	overflow:hidden;}#blocks li img{	float:left;	margin-left:-110px;	width:100px;	height:100px;}
    That CSS needs merging with any existing styles, but hopefully that should see you right :D
     
  16. blimey Harry.. you little wizard you :lol:
     
  17. Harry

    Harry Senior Member

    Is it working?
     
  18. not tested it yet.. I will give it a go shortly :)
     
  19. the actual code for the block is this:

    Code:
    <div id="blocks" style="display: <?php echo get_option('featured_foot_show_hide'); ?>;">         <div class="blockitem" style="display: <?php $featuredfoot1 = get_option('foot_title_1', $featuredfoot1 = true); ?><?php if($featuredfoot1 !== '') { ?><?php echo ''; ?><?php } else { echo 'none'; } ?>;">        <div class="blockimage">            <a href="<?php $footlink1 = get_option('foot_link_1', $footlink1 = true); ?><?php if($footlink1 !== '') { ?><?php echo $footlink1; ?><?php } else { echo '#'; } ?>">                <img style="background: url(<?php echo get_option('foot_image_1'); ?>) center no-repeat;" src="<?php bloginfo('template_url'); ?>/images/100.gif" alt="FFI1" />            </a>        </div>        <h4><a href="<?php $footlink1 = get_option('foot_link_1', $footlink1 = true); ?><?php if($footlink1 !== '') { ?><?php echo $footlink1; ?><?php } else { echo '#'; } ?>"><?php echo get_option('foot_title_1'); ?></a></h4>        <p><a href="<?php $footlink1 = get_option('foot_link_1', $footlink1 = true); ?><?php if($footlink1 !== '') { ?><?php echo $footlink1; ?><?php } else { echo '#'; } ?>"><?php echo get_option('foot_description_1'); ?></a></p>    </div>        <div class="blockitem" style="display: <?php $featuredfoot2 = get_option('foot_title_2', $featuredfoot2 = true); ?><?php if($featuredfoot2 !== '') { ?><?php echo ''; ?><?php } else { echo 'none'; } ?>;">        <div class="blockimage">            <a href="<?php $footlink2 = get_option('foot_link_2', $footlink2 = true); ?><?php if($footlink2 !== '') { ?><?php echo $footlink2; ?><?php } else { echo '#'; } ?>">                <img style="background: url(<?php echo get_option('foot_image_2'); ?>) center no-repeat;" src="<?php bloginfo('template_url'); ?>/images/100.gif" alt="FFI2" />            </a>        </div>        <h4><a href="<?php $footlink2 = get_option('foot_link_2', $footlink2 = true); ?><?php if($footlink2 !== '') { ?><?php echo $footlink2; ?><?php } else { echo '#'; } ?>"><?php echo get_option('foot_title_2'); ?></a></h4>        <p><a href="<?php $footlink2 = get_option('foot_link_2', $footlink2 = true); ?><?php if($footlink2 !== '') { ?><?php echo $footlink2; ?><?php } else { echo '#'; } ?>"><?php echo get_option('foot_description_2'); ?></a></p>    </div>        <div class="lastblockitem" style="display: <?php $featuredfoot3 = get_option('foot_title_3', $featuredfoot3 = true); ?><?php if($featuredfoot3 !== '') { ?><?php echo ''; ?><?php } else { echo 'none'; } ?>;">        <div class="blockimage">            <a href="<?php $footlink3 = get_option('foot_link_3', $footlink3 = true); ?><?php if($footlink3 !== '') { ?><?php echo $footlink3; ?><?php } else { echo '#'; } ?>">                <img style="background: url(<?php echo get_option('foot_image_3'); ?>) center no-repeat;" src="<?php bloginfo('template_url'); ?>/images/100.gif" alt="FFI3" />            </a>        </div>        <h4><a href="<?php $footlink3 = get_option('foot_link_3', $footlink3 = true); ?><?php if($footlink3 !== '') { ?><?php echo $footlink3; ?><?php } else { echo '#'; } ?>"><?php echo get_option('foot_title_3'); ?></a></h4>        <p><a href="<?php $footlink3 = get_option('foot_link_3', $footlink3 = true); ?><?php if($footlink3 !== '') { ?><?php echo $footlink3; ?><?php } else { echo '#'; } ?>"><?php echo get_option('foot_description_3'); ?></a></p>    </div>    </div>
    Do you think this will still work with the <ul> and <li> suggestions you've made? :)
     

Share This Page