PDA

View Full Version : how to repeat a background up to certain width



ksanjanadevi
02-18-2009, 11:56 AM
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;
}

abduraooft
02-18-2009, 12:14 PM
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
][/COLOR] to wrap your code while posting here. You may edit your original post.

ksanjanadevi
02-19-2009, 05:40 AM
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;
}

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.......

Excavator
02-19-2009, 11:37 AM
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.


<!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>

Webitseo
02-24-2009, 02:53 PM
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
][/COLOR] 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:


body {
font: 85% "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
background-image: url(images/bbg.jpg);
background-repeat: repeat-x;
}



Thanks!

abduraooft
02-24-2009, 02:59 PM
You have

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 :)

Webitseo
02-24-2009, 03:14 PM
...

PS: It's always better to start a new thread that hijacking other's :)

Is this referring to me?

abduraooft
02-24-2009, 03:27 PM
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 :thumbsup:

redspyder
02-24-2009, 03:31 PM
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

Webitseo
02-24-2009, 03:31 PM
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.