Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Oct 2008
    Location
    India, Banglore
    Posts
    50
    Thanks
    1
    Thanked 0 Times in 0 Posts

    how to repeat a background up to certain width

    My menu has a background that gets repeats upto certain width (98.9%) its was fine in 1024 px, but if I see the same in 1200px or any higher resolutions the menu gets repeated beyond the given width.. How do I avoid it??

    Actually I tried centering my layout in high resolution. so I gave margin:auto in body and container. It got fixed but the menu is repeating upto the end of the screen after giving margin:auto;.

    body { color:#333; background:#fff; font-family:Verdana,Arial,Helvetica,sans-serif; margin:auto; font-size:11px; line-height:normal; width:99%; border:0px solid blue; width:1000px; }

    /*menu*/
    #block-nice_menus-1 {
    padding-left:0px;margin-left:0px;
    }

    .block-nice_menus {
    line-height: normal;
    padding:0px;
    background:url(topBG.jpg) ; /* top right; */ /*background image repeats here*/
    height:85px;
    width:auto;
    margin:0px;
    /*max-width:97.9%;*/
    max-width:98.2%;
    }

    ul.nice-menu,
    ul.nice-menu ul {
    z-index: 5;
    position: relative;
    }

    ul.nice-menu li {
    position: relative;
    width:auto;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    My menu has a background that gets repeats upto certain width (98.9%) its was fine in 1024 px, but if I see the same in 1200px or any higher resolutions the menu gets repeated beyond the given width.. How do I avoid it??
    Can't you just specify the repeat-x in your background property to ignore the default repeat(which is in both x&y directions)?

    PS: please use [CODE][/CODE] to wrap your code while posting here. You may edit your original post.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Oct 2008
    Location
    India, Banglore
    Posts
    50
    Thanks
    1
    Thanked 0 Times in 0 Posts
    My menu has a background that gets repeats upto certain width (98.9%) its was fine in 1024 px, but if I see the same in 1200px or any higher resolutions the menu gets repeated beyond the given width.. How do I avoid it??

    Actually I tried centering my layout in high resolution. so I gave margin:auto in body and container. It got fixed but the menu is repeating upto the end of the screen after giving margin:auto;.

    Code:
    body { color:#333; background:#fff; font-family:Verdana,Arial,Helvetica,sans-serif; margin:auto; font-size:11px; line-height:normal; width:99%; border:0px solid blue; width:1000px; }
    /*menu*/
    Code:
    #block-nice_menus-1 {
    padding-left:0px;margin-left:0px;
    }
    
    .block-nice_menus {
    line-height: normal;
    padding:0px;
    background:url(topBG.jpg) ; /* top right; */ /*background image repeats here*/
    height:85px;
    width:auto;
    margin:0px;
    /*max-width:97.9%;*/
    max-width:98.2%;
    }
    
    ul.nice-menu,
    ul.nice-menu ul {
    z-index: 5;
    position: relative;
    }
    
    ul.nice-menu li {
    position: relative;
    width:auto;
    }
    I gave repeat -x for background property , it repeats according to the given width but in 1200px resolution it repeats beyond the given with..this is my problem.......
    Last edited by ksanjanadevi; 02-19-2009 at 04:42 AM. Reason: add more info

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello ksanianadevi,
    I think your trying to put styles on the body when you need to be looking at something else.
    This repeats the menu bar image, 98.2% wide, no matter what resolution your in.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	color:#333;
    	background:#fff;
    	font: 11px/normal Verdana, Geneva, sans-serif;
    }
    #block-nice_menus-1 {
    	padding-left:0px;
    	margin-left:0px;
    }
    
    .block-nice_menus {
    	padding:0px;
    	background: url(http://nopeople.com/CSS/full-height-layout/menu_mid.png) repeat-x; 
    	height:85px;
    	width:auto;
    	margin:0px;
    	/*max-width:97.9%;*/
    	max-width:98.2%;
    }
    ul.nice-menu,
    ul.nice-menu ul {
    	z-index: 5;
    	position: relative;
    }
    ul.nice-menu li {
    	position: relative;
    	width:auto;
    }
    </style>
    </head>
    <body>
        <div id="block-nice_menus-1">
            <div class="block-nice_menus">
                <ul class="nice-menu">
                    <li><a href="">one</a></li>
                </ul>
            <!--end block-nice_menus--></div>
        <!--end block-nice_menus-1--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Feb 2009
    Location
    London, UK
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Can't you just specify the repeat-x in your background property to ignore the default repeat(which is in both x&y directions)?

    PS: please use [CODE][/CODE] to wrap your code while posting here. You may edit your original post.
    I'm having this same problem, which you can see here: http://www.webitseo.com

    I want the header background image to only be as wide as the content, but it stretches across the whole screen. I've tried setting the width and max-width in the body element, but neither of those work. What other options are there for repeating an image to a specified width?
    Here is my code:
    Code:
    body { 
    font: 85% "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-image: url(images/bbg.jpg);
    background-repeat: repeat-x;
    }
    Thanks!

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    You have
    Code:
    body {/*style.css (line 5)*/
    background-image:url(images/bbg.jpg);
    background-repeat:repeat-x;
    font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size:14px;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:normal;
    }
    #navigationline {/*style.css (line 102)*/
    background:#678B3F url(images/navlinebg.jpg) repeat scroll 0;
    border-top:1px solid #FFFFFF;
    clear:both;
    height:58px;
    line-height:58px;
    padding:0;
    width:100%;
    }
    and those images are actually the same. So removing the background from your body tag would fix it.

    PS: It's always better to start a new thread than hijacking other's
    Last edited by abduraooft; 02-24-2009 at 02:28 PM. Reason: typo :(
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New to the CF scene
    Join Date
    Feb 2009
    Location
    London, UK
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    ...

    PS: It's always better to start a new thread that hijacking other's
    Is this referring to me?

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Quote Originally Posted by Webitseo View Post
    Is this referring to me?
    Yes, as you see, this thread was originally posted by ksanjanadevi, and I think this is not yet solved for the OP. Despite this, I answered your query because it was so simple(in the first look), and you quoted my comments in your post. If not solved yet, I 'd recommend to start a new thread
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Jan 2009
    Location
    Cornwall - UK
    Posts
    47
    Thanks
    0
    Thanked 9 Times in 9 Posts
    The reason it's right across the page is because the body tag doesn't have a width assigned, so body is 100% wide.

    All the best - redspyder

  • #10
    New to the CF scene
    Join Date
    Feb 2009
    Location
    London, UK
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, a lot of forums are different. Some get annoyed when you start new threads of topics already being discussed. I didn't think I was "hijacking" the thread but joining in the topic.
    Your suggestion worked. Thank you for taking the time to check it out.
    Last edited by Webitseo; 02-24-2009 at 03:34 PM. Reason: I misunderstood what poster said, tried wrong thing, re-read post, tried something else, and it worked.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •