WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Having a vertical background "strip" repeat to left and right of blog (7 posts)

  1. mattshepherd
    Member
    Posted 5 years ago #

    Hello,

    Trying to help my wife out with her blog, and I've never actually tried to use a repeating background image before: we've got a vertical image that we'd like to "loop" to the left and right of the central blog area, running in a strip down either side of the blog but not necessarily repeating out to the far sides of the screen.

    At the moment, I have

    body {
    	margin: 0;
    	padding: 0;
    	background: #FFF url('images/applemirror.jpg');
    	background-repeat: repeat-y;
    	font-size: 80%;
    	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
    	color: #000;
    	text-align: center;

    which causes the banner to run up the left side of the blog area, but not the right side. Adding repeat-x to the background-repeat makes it repeat, but starting from the far left, then with an ugly half-repeat before it gets to the blog area, and it runs "under" the blog to repeat on the other side with more ugly dividers.

    Ideally, I'd like the image to repeat once to the left and once to the right of the blog space, using repeat-y for up and down but nothing repeating on the X axis.

    I've tried searching these forums but I'm obviously not using the right terms. Thanks for any help!

  2. Steffen Jørgensen
    Member
    Posted 5 years ago #

    background-position is what you're looking for:
    http://www.w3schools.com/css/css_background.asp

    something like:

    body
    {
    background-image: url('images/applemirror.jpg');
    background-repeat: repeat-x;
    background-attachment:fixed;
    background-position: top center;
    }

    or:

    body
    {
    background:url('images/applemirror.jpg') repeat-x fixed top center;
    }

  3. mattshepherd
    Member
    Posted 5 years ago #

    Excellent! Thanks for pointing me in the right direction; I'll start reading.

  4. mattshepherd
    Member
    Posted 5 years ago #

    After reading that w3schools set of pages, it seems like this is the best option:

    body {
    	margin: 0;
    	padding: 0;
    	background: #FFF url('images/applemirror.gif');
    	background-repeat: repeat-y;
    	background-position: center;
    	font-size: 80%;
    	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
    	color: #000;
    	text-align: center;

    with "applemirror" being a 1200px-wide image, 800px in the middle for the blog and 200px for the border on the left and right. I left the middle 800px transparent, but could have just as easily made it solid, as it's "covered" by the blog contents.

    A 1200px GIF where the middle 800px is covered seems a little inefficient, but was the best workaround I could bungle my way into. Are there any more streamlined solutions?

  5. mattshepherd
    Member
    Posted 5 years ago #

    (since upgraded the GIF to a lighter JPG, but it still seems odd that the best way of going about this is to construct 1200px images with identical left/right borders.)

  6. kinkythought
    Member
    Posted 5 years ago #

    I really don't think there would be anything more streamlined. the body of your page can only have one background image and still be cross-browser compatible. The only other option would be to play around with extra divs around your content, but that doesn't seem more streamlined

  7. mattshepherd
    Member
    Posted 5 years ago #

    Okay -- thanks for the insight.

Topic Closed

This topic has been closed to new replies.

About this Topic