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,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 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??
    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,675
    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,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    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,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    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
    •