...

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum