|
CSS - Css Background Image Repeat Issue
Similar TutorialsI'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 Hi 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 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 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? for some reason i cant figure out, i cant get a background image to show up at all in my document. ive tryed validating both CSS and HTML, ive tryed different approaches to adding a background image in CSS and even removing individual styles to try to find the source of the issue. I am new to this forum and this is my first post. if anyone can tell me why this isnt working i would greatly appriciate it. here is the code: Code: <html>
<head>
<title>Home</title>
<style type="text/css">
body
{
background:#3D1400;
}
/******modual positioning******/
div#container
{
width:48em;
height:41em;
margin-right:auto;
margin-left:auto;
margin-top:auto;
margin-bottom:0em;
padding:1em;
padding-top:0em;
background:#00BFBF;
}
/******* this is where im trying to put a background image*/
div#headding
{
background:url("") purple repeat-x;
width:48em;
height:4em;
padding:1em;
margin-bottom:3.5em;
margin-left:-1em;
}
img.bd
{
position:relative;
width:50em;
height:0.5em;
left:-1em;
top:-0.5em;
}
nav
{
margin-top:-1em;
margin-left:0em;
margin-bottom:3em;
width:48em;
height:1.5em;
background:#ffffff;
padding-left:0em;
border-radius:0.2em;
}
/*side bar*/
div#side_left
{
width:10em;
height:29em;
float:left;
background:#4CD2D2;
}
#contests, #featured_blog, #featured_discussion, #featured_poll
{
width:10em;
margin:0.8em;
color:#0D1A8C;
font-weight:900;
font-size:0.8em;
background:#79DDDD;
padding:0.5em;
}
hr.side
{
border:0.1em solid #0D1A8C;
width:10em;
}
/*side bar end*/
div#featured_photo
{
float:left;
margin-left:1em;
width:20em;
height:20em;
background:#000000;
overflow:hidden;
border-radius:1em;
}
div#top_rated_photos
{
float:right;
width:16em;
height:20em;
background:#111111;
}
footer
{
position:relative;
height:4em;
width:58.6em;
margin-right:auto;
margin-left:auto;
background:#000000;
text-align:center;
padding:2em;
font-size:0.8em;
}
a.f
{
color:#ffffff;
text-decoration:none;
border-right:.1em solid #ffffff;
padding-right:1em;
margin-right:0.3em;
padding-left:0.3em;
margin-left:0.3em;
}
/**********Photo Gallery**********/
a.tr_img img.top_r
{
height:3.9em;
width:3.9em;
float:left;
border:0.1em solid #000000;
}
a.tr_img img.top_r:hover
{
margin:0em;
border:.1em solid #ff0000;
}
/******text styles******/
h1
{
font-size:2em;
text-transform:capitalize;
border-bottom:0.2em solid #8C8CE8;
color:#8C8CE8;
}
span#fp
{
color:#999999;
float:right;
margin-right:1em;
font-weight:bold;
display:block;
}
/***************************************NAVIGATION BAR***************************/
/*top level styles*/
ul.top_link li
{
float:left;
background:#ffffff;
position:relative;
display:inline;
border-right:0.1em solid #00BFBF;
border-left:0.1em solid #00BFBF;
}
ul.top_link a
{
display:block;
position:relative;
font-size:1.3em;
color:#000000;
text-decoration:none;
padding-left:1em;
padding-right:1em;
}
/* style the top level hover incase images fail *//* dropdown ul styles */
ul.top_link li.sub_link a
{
padding-right:0.5em;
padding-left:0.5em;
width:8em;
}
ul.top_link >li:hover
{
background:#000080;
}
ul.top_link >li>a:hover
{
color:#ffffff;
}
ul.top_link li:hover.sub_link, ul.top_link li.sub_link a:hover, ul.top_link li.sub_link a.mn_active
{
background:#000080;
color:#ffffff;
}
/********* dropdown sytles *********/
ul.top_link li ul
{
position:absolute;
top:2em;
left:0;
z-index:1;
visibility:hidden;
}
ul.top_link li > ul
{
top:auto;
left:auto;
}
ul.top_link li:hover ul, ul.top_link, ul.top_link a:hover ul
{
visibility:visible;
}
ul.top_link ul li
{
border:none;
height:auto;
float:left;
width:8em;
top:0.15em;
left:-2.6em;
padding:0em;
text-align:left;
background:#ffffff;
}
ul.top_link ul li a
{
float:left;
font-size:0.8em;
text-decoration:none;
display:block;
height:2em;
line-height:2em;
text-align:left;
}
/************************** ~DROPDOWN STYLES~ *************************/
.top_link li.sub_link ul
{
background:#ffffff;
padding-left:0em;
}
.top_link li.sub_link ul li a
{
width:8em;
}
.top_link li.sub_link ul li a:hover
{
background:#000080;
color:#6385A6;
} </style>
<base href="index.html" />
</head>
<body>
<div id="container">
<div id="headding">
<h1>Welcome to purple panda bear ♥</h1>
<img src="" class="bd" />
<img src="" class="bd" />
<img src="" class="bd" />
</div>
<nav>
<ul class="top_link">
<li class="top_link">
<a href="index">home</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">blog</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">forum</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="">forum</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">gallery</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">anime</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">login</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
</ul>
</nav>
<div id="side_left">
<div id="contests">
Featured Contests
<hr class="side" />
<a href="">Bunnys vs. Pandas</a>
<a href="">Dianoaurs vs. Elefants</a>
<a href="">Pickles vs. Ice Cream</a>
</div>
<div id="featured_blog">
Featured Blogs
<hr class="side" />
<a href="">blog 1</a> by,
user 1<br />
<a href="">blog 2</a> by,
user 2<br />
<a href="">blog 3</a> by,
user 3<br />
</div>
<div id="featured_discussion">
Featured Forums
<hr class="side" />
<a href="">Anime discussion</a>
<a href="">Panda discussion</a>
<a href="">Epicness </a>
</div>
<div id="featured_poll">
Featured Poll
<hr class="side" />
What is your favorate fuzy animal?<br />
<input type="radio" value="bunnys" />Bunnies<br />
<input type="radio" value="pandas" />Pandas<br />
<input type="radio" value="kittys" />Kittys
</div>
</div>
</div>
<footer>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
</footer>
</body>
</html>
I am using eclipse ide to develop a html page. It has a preview function where I can see the background image correctly. However when I run this in a an external browser (IE/Firefox) the background image does not appear. I can go to the location of the image in the browser and see it, also I can view source in browser and it is as below. Also the image is in the same directory as the html page. Any help at all on this would be very much appreciated. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style>
body {margin-left: 0px;margin-right: 0px;background:url(bg-gray.gif) repeat center left;color: #000000;}
</style>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>Login</title>
</head>
<body >
</body>
</html>
Hi to all, I have a problem to show full image on background.The css which i am using is good if the screen size is 17 inches or less but above 17 inches background image does not expand to full width and height. One thing i want to clear that we can't repeat that image . any solution to this problem will be appreciated. thanks 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'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 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. Hi all, This problem has been plaguing me for a long while now and I am getting to the end of my tether! All I want to do is add a simple repeating background image to my 'container' div (i called mine #outer for some reason!) To do this i added the following CSS: Code: #outer { width:970px; text-align:left; margin:0 auto 50px; padding:0; background-image:url(/Images/bg.jpg); background-position:center; background-repeat:repeat-y;}
Pretty simple I thought! However, in FF/Chrome the background image does not show up at all, but in IE it does...here is the page: http://onyahead.com/latestnews_test.php Obviously, the output that i get from IE is actually the output I want...i just cannot get to the bottom of why it is not showing in FF!! Any ideas? Sam 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. 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>
|
|||||||