|
CSS - How To Repeat A Background Image From The Middle Of The Page
Hi,
I want to repeat a background image (actually, its just a colour) from 50% of the page. i.e. I want one side of my site to be of blue background (the left 50%) and the other side to be of grey background (the right 50%). | Blue | Grey | | Blue | Grey | | Blue | Grey | | Blue | Grey | So let's say the background of my site is blue all over. Code: <body> <div id='greybg'> </div> </body> But the particular div is set to something like: Code:
#greybg {
background-image: url("../images/body/greylong.gif");
background-repeat: repeat-x;
background-position: 50% 0%;
}
This code doesn't work though. The repeat-x property makes it repeat all throughout, whereas what I want is for the image to repeat STARTING FROM 50% of the middle of the page (i.e. the second 50% column of the page). Any way I can achieve this? TIA Similar TutorialsHi all. This is my first time posting ever so please be gentle. On my website I have background image with stripes and grey. I want it to go all the way down the bottom of the page. Currently the background image stops where the content ends. I have tried height:100%; and that solves the problem, but creates another if the user has a smaller browser window. Can someone please help me out? Page URL: leannemarie.com/testing_index.php CSS: leannemarie.com/css/testing_main.css Thanks LeAnne I'm having a problem with my background image showing through under two floats (left and right), as you can see here . The CSS code I'm using to accomplish this is: Code:
#webupdates {
position: relative;
float: left;
width: 219px;
min-height: 260px;
background-color: #5A759F;
}
#webcontent {
position: relative;
float: right;
width: 537px;
min-height: 260px;
background-color: #DFE2E8;
}
#flashlogo {
position: relative;
width: 778;
height: 219;
}
#content_table {
margin: 0 auto;
width: 778px;
background: #FFFFFF url(images/bg.jpg) repeat-y !important; All that shows up is the white BG. :(
}
And the portion of code I'm dealing with is: Code: <body style="background-color: #404044;">
<div id="content_table">
<div id="flashlogo">
...
</div>
upper navigation images
<div id="webupdates">
...
</div><div id="webcontent">
...
</div>
<br />
<img src="images/bar_bottom.jpg" alt="" />
</div>
</body>
Thank you so much in advance for your help. I've been at this for hours. Hi there, I am helping a friend with a site of his. Basically, the problem is that an title-header image keeps getting repeated down the page when a page is more than a certain length. The page I am referring to is..... http://www.darajewelry.com/Merchant...ge=DJ/CTGY/IG-N If you scroll down, you will notice the brown bar repeating itself. The CSS code currently is: Code: body {
background-image: url(graphics/00000001/bkgrd.gif);
margin-left: 0px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
}
Now I thought adding : background-repeat: no-repeat; would solve it like below: Code: body {
background-image: url(graphics/00000001/bkgrd.gif);
background-repeat: no-repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
}
But that doesn't work. The image doesn't even appear. As I'm relatively new to working with CSS, could some point me in the right direction. Many thanks! Nathan Hi everybody, i need some help figuring out some things with css and html: This is the CSS part of the code <style> .leftbanner{ background:url(leftbanner.jpg), right, repeat-y; } .topbanner{ height:100%; width:100%; background:url(topbanner.jpg), bottom, repeat-x; } body{ margin:0px; } this is the cell that i want the topbanner class to be used on. there are two more images in that cell but the strange thing for me is that i dont get any background image?!? any help ? <td colspan="2" align="center" valign="bottom" class="topbanner"> <img src="spacer40jpg" width="100%" height="1"> <br> <img src="kormrez.jpg" width="451" height="85"></td> currently i just use Code: background-image: url(images/layout/mem.png); to show an image as the background of a div, but if the image is smaller than the div it repeats. How do i stio it from repeating have it display one on bottom left AND one bottom right? They are the same image, I just need it on both sides if possible. Hello I have a small image. What I want to do is use the image as a background image, but only display a small section of that image and repeat that section over and over, depending on how much content is on top of the image. I hope I made that clear enough to understand. I have the following code: Code:
<style>
.vote {
background-image: url('images/vote.gif');
background-repeat: repeat-y;
background-position: 0 -45;
height: 50px;
width: 199px;
}
</style>
<div class="vote">
d<br /><br /><Br /><br /><BR /><BR /><br /><br /><br /><br />j
</div>
That code displays only part of the image, as I want it to, however, I do not know if it is possible to now repeat just that section of the image again and again. I hope someone understands and can help. Thanks Hello everybody, I used the following line <td width="8" background="<?php print $image; ?>" height="15" style="background-repeat: no-Repeat"></td> and it worked well for IE, but in Mozilla the image wasn't displayed properly, so I used the following line for Mozilla: <td width="8"> <img src="<?php print $image; ?>" width="8" height="15" style="background-repeat: no-Repeat"> </img> but now the "style" property does not work, and there is a back ground repeat, how can I avoid the background repeat in Mozilla? I'm trying to vertically repeat a background image, but only in one way. Here is what I have right now: Code: background: white url(../images/side.gif); background-repeat: repeat-y; background-position: 612px 80px; I want the background image to start 80px from the top and repeat down, but NOT UP. Is there a way to do this? I am working on i hate mariah dot com and I can't get the background to repeat or be fixed no matter what I do. It keeps showing the page background. This is the code I have, what am I doing wrong!! Help! #art-page-background-simple-gradient { position: absolute; background-image: url('images/blogbg.png'); background-repeat:repeat-y; top:0; width: 1700px; height: 1200px; } I'm trying to get a background image to repeat. The only way it works is if I actually declare the height ex: height: 1000px; If I don't declare it like that it simply doesn't appear at all. If I declare it as height:100%; it makes the background the height of the browser window, but it doesn't span the height of the entire page. Meaning that if the browser window is 800px tall, it'll only display 800px of background and anything beyond that is blank regardless of whether or not the content of the page extends past 800px. Here's the doc type and style I'm using. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> #container { position: absolute; text-align: left; width: 800px; background: url(homeback.jpg) repeat-y 100%; left: 50%; right: auto; bottom: auto; clear: both; margin-left: -400px; } I would appreciate some help on this problem of mine. I have working on this and can't really find a great answer for what I need my CSS to do. http://www.ambrelasweb.com/eshpi4/index.html I am trying to get the bg image (the people symbols) to reach to the bottom of the page for each different lengthwise page on this website without having to get a million <br> in there to make it continue down the page. Index Page: Code: <div id="symbolBG"><br /><br /><br /></div> <div id="wrapper">"All my other content"</div> CSS: Code:
#wrapper {
width: 1000px;
text-align: left;
position: absolute;
top: 0px;
left: 50%;
margin-left: -500px;
z-index: 2;
height: auto;
border-color: #FF0000;
border-width: 3px;
border-style: solid;}
#symbolBG {
width: 1350px;
text-align: left;
position: absolute;
top: 0px;
left: 50%;
margin-left: -675px;
z-index: 1;
background: url(images/symbolBG.jpg);
background-repeat: repeat-y;
text-align: left;
height: auto;
border-color: #993333;
border-width: 2px;
border-style: solid;}
I would appreciate any help anyone could provide. Thanks. So I've only been building layouts with CSS for 2 yrs now and I guess I've never really had this issue before (though I imagine it's an easy one). On the page I'm building I have a text area that starts off with a rough paper texture thats about 400 px tall (with text on top) and I want the rest of the text on top to overflow into a different y-repeat background image. I got it to work PERFECTLY in IE7, but firefox has been nothing but a pain. I know that I'm close since one browser is showing it correctly, but I need either a firefox-only fix or an overall fix that won't mess up the way IE7 displays it. To keep from posting the whole document I'll post the reference on my HTML page and the CSS itself (I can add more later if need be) CSS: Code: #textbgtop {
width: 886px;
min-height: 580px;
background-image: url(img/TextBGtop2.jpg);
background-repeat: no-repeat;
padding-left: 14px;
padding-right: 14px;
}
#maintextarea {
width: 886px;
background-image: url(img/TextBGrepeat.jpg);
background-repeat: repeat-y;
}
HTML REFERENCE: Code:
<div id="maintextarea">
<div id="textbgtop">
TEXT GOES HERE....I am running an DO WHILE statement that pulls content from a mySQL DB. The content is all displaying correctly. As it is, the page displays fine in IE7, but on firefox the top image is in the proper place, but the TextBGrepeat img is directly below it, and then the text overflows in the main page background, THEN the bottom nav bar is placed below that.
</div></div>
I don't know if I've provided enough information but does anyone see an obvious error? If not I can definately post more but I would need to modify some specifics. Thanks in advance for any help! -crazygol4 I am trying to manage the background repeat using CSS. I have tried as many html hacks as I can think of, but none seems to work. Here is a sample of my style sheet .content{ padding: 0px;margin:0px; width:961px;height:100%; float:left; } #bgLeft { width:5px;height: 100%; min-height: 100%; background: url(img/bg_left.gif) repeat-y; float:left; } #bgRight { background:url(img/bg_right.gif) repeat-y 100%; width:5px;height:100%; min-height:100%; float:left; } .bodyMain{ padding: 0px;margin:0px; width:735px;height:100%; background-color: #f8f8f8; float:left; } And here is a copy of my html <div class="content" align="left"> <div id="bgLeft"> </div> <div class="bodyMain" > <!-- ###CONTENT### --> </div> <div id="bgRight"> </div> </div> n.b.: the content of my site must have two lines images (one left and one right - see bgLeft and bgRight stylesheet), whose height depends on the content space. In IE7 I can see the bgLeft and bgRight images, but not for all the vertical height, in Firefox I cannot see anything. Any ideas? thanks I have a style sheet with a property that allows me to repeat an image from left to right. I want to go the opposite way, from right to left. Can I do this? How? I am having a problem with back-ground repeat, it works fine in IE7 and most browsers except IE6 and lower, im not sure what to do? Website is: http://www.artandcraftsdirect.com/ I'm trying to make a div have a background image that only appears down the left hand side, I thought that this would be simple enough but I got no background image at all. Code: div.bar { color: #000000; background-color: #cccccc; background-image: url(gfx/fade.gif);
background-repeat: repeat-y;}
Code: <div class="bar">Writing and stuff</div> What am I doing wrong? If it helps, here is the whole css file and here is the page I'm trying to use it on. So this may be a dumb question but I see a lot of people who use css create images as small as possible. Usually something that is 750px wide and 1px tall(something around those dimensions) and then they simply apply a 'repeat-y' or 'repeat-x'. Now I understand what this does but I'm wondering why the image is made as small as possible. I know this makes the image smaller to download so I'm thinking that this speeds up the site loading because the browser is forced to repeat that single image along whatever axis. Am I right? Does the browser download the image once and then repeat it throughout the page? Ok, I am building a site for a model and I have a stripped background for the left navigation. IE7 wont display it, but of course all the other browsers do. I cant post a link cause im a newbie to this forum, but I can post my code! any help would be great: Css Code Code:
.container {
width: 1000px;
margin: 0px auto;
}
.header {
background: url(../images/headerbg.jpg);
height: 200px;
width: 995px;
margin-right: auto;
margin-left: auto;
}
.background {
background: url(../images/backgroud.jpg) repeat-x;
width: 14px;
}
.leftnav {
background: url(../images/stripes.jpg) repeat;
float: left;
width: 150px;
color: #FFFFFF;
visibility: visible;
margin-right: auto;
margin-left: auto;
}
.maincontent {
background: #FFFFFF;
width: 487px;
margin-right: auto;
margin-left: auto;
padding-right: 5px;
padding-left: 5px;
text-align: left;
float: left;
}
.rightside {
background: url(../images/body.jpg);
float: right;
height: 461px;
width: 351px;
margin-right: 2px;
}
.border1 {
background: url(../images/border1.gif) repeat-x;
height: 14px;
}
XHTML Code Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
<!--
body {
background: url(../images/temp_slices_03.jpg) repeat-x;
width: 1px;
margin-top: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<div align="center">
<div class="container">
<div class="header">Content for class "header" Goes Here</div>
<div class="leftnav">Content for class "leftnav" Goes Here</div>
<div class="maincontent">Content for class "maincontent" Goes Here</div>
<div class="rightside">Content for class "rightside" Goes Here</div>
</div>
</div>
</body>
</html>
|
|||||||