Having a vertical background “strip” repeat to left and right of blog

  • Resolved mattshepherd

    (@mattshepherd)


    14 years, 10 months 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!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Steffen Jørgensen

    (@jint)

    14 years, 10 months 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;
    }

    Thread Starter mattshepherd

    (@mattshepherd)

    14 years, 10 months ago

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

    Thread Starter mattshepherd

    (@mattshepherd)

    14 years, 10 months 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?

    Thread Starter mattshepherd

    (@mattshepherd)

    14 years, 10 months 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.)

    kinkythought

    (@kinkythought)

    14 years, 10 months 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

    Thread Starter mattshepherd

    (@mattshepherd)

    14 years, 10 months ago

    Okay — thanks for the insight.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Having a vertical background “strip” repeat to left and right of blog’ is closed to new replies.