Backgrounds

C

chrismitchell

Guest
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
 
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;}
 
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
 
nope still seems to only do the repeat-x for me :( very confusing :( does it only show repeat-x for you too Harry?
 
It also seems to not be showing the full width of the bgTop.png either which is odd :(
 
Wooo :D cheers Harry.. I knew I missed something!!! Thanks mate :) works like a treat :D
 
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 :)
 
does the blocks at the bottom not look very good to you Harry? Or is it coming up with syntax errors from your end? :)
 
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 :)
 
Righto :) well i'll give it a go-ski :D :lol:

cheers again mate :D
 
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
 
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? :)
 
You must log in or register to reply here.
Back
Top