Background overlap? Please read & help, link provided.

Discussion in 'CSS' started by le007, Dec 6, 2011.

0
Page 1 of 2
  1. #1
    Hi all,

    I have tried everything, image re-size, background: fixed - but my site http://www.StandoutModels.com has a horizontal issue with monitor sizes over 18 inches wide. Anything over that and the image starts repeating itself.

    How can I possibly get a fix for this? I thought with background: fixed that there'd be no horizontal scrollbar at all - even if there wasn't, there's still the problem of overlapping - please help ",)
     
    le007, Dec 6, 2011 IP
  2. msm2010

    msm2010 Greenhorn

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #2
    You this
    html, body {    
        height: 100%;
        text-align: center;


    }

    change
    html, body {
        background-position: center top;
        background-repeat: no-repeat;
        height: 100%;
        text-align: center;


    }

    and

    <body style="background: url("img") no-repeat scroll center top ;"
     
    Last edited: Dec 6, 2011
    msm2010, Dec 6, 2011 IP
  3. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #3
    Hi msm2010,

    thanks for the reply. That centres all the pages but doesn't stretch them across to meet the bigger browser and there's still a horizontal scroller on smaller monitors? Any other suggestions?

    Also, the homepage is a slideshow and that won't work with this, any suggestions there please?
     
    le007, Dec 6, 2011 IP
  4. msm2010

    msm2010 Greenhorn

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    Come on I'll do it. So it will be faster. Or write specifically as it should be. Or let me see a pattern will set you as you want.
     
    msm2010, Dec 7, 2011 IP
  5. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #5
    Thank you:

    css file:
    * {
margin: 0;
padding: 0;
}
img {
border: 0;
}

ul, li {
list-style: square;
}


html, body {
    height: 100%;
    text-align: center;
    overflow: -moz-scrollbars-vertical;
    overflow-x: hidden;

}




#topbar {
margin-top: 30px;
height: 40px;
width: 100%;
border-style:solid;
border-color:white;
border-width: 1px;
border-left-width: 0px;
background-color: black;

}


#details {
opacity:1;
background-color: black;
color:white;
width: 800px;
margin: 0 auto; 
margin-top: 100px;
filter: alpha(opacity=60); 
border-style:solid;
border-color:white;
border-width: 1px;
font-family: tahoma;
font-size: 11px;
text-decoration: none;
}

.toptable {
text-align: center;
}


.imagebar {
position: absolute;
top:15px;
left:40px;
border-style:solid;
border-color:white;
border-width: 1px;

}



#container {
width: 2205px; /*silly width, not 800-friendly yet still small on the next screensize up... might as well go to 960 or something*/
margin: 0 auto;
}
* html #container {height: 40px;} /*no min-height for lte IE6*/

#header {
position:relative;
z-index:99;
width:100%;
}

h1 {
color: #fff;
height: 25px;
width: 849px;
position: relative;
}
h1 span {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(logof.jpg) 0 0 no-repeat;
} 


#menu1 {
#0ED1E8
background-color: black;
width: 100%; /*haslayout so background colour shows in IE6*/
margin-left:350px;
margin-top:7px;
overflow: hidden;
}
#header ul li {
display: inline; /*some declaration for IE7, otherwise ignore li's*/
z-index:1000
}

#menu11 {
border-top: 1px solid #949494;
background-color: #37383d;
width: 100%; /*haslayout so background colour shows in IE6*/
overflow: hidden;
list-style-type: square;
}


#header ul a, #header p {
float: left;
font-family: tahoma;
font-size: 11px;
color: #e0e4e7;
height: 26px;
line-height: 26px;
text-align: center;
text-decoration: none;
padding: 0 10px;
}
#header ul a:focus, #header ul a:hover {
color: black;
background-color: #0ED1E8;
}

* html #header p {margin-right: -3px;} /*stoopid 3-pixel-jog bug*/


#menu2, #footer {
background-color: #6B6565;
color: #e0e4e7;
overflow: hidden;
border-top: 1px solid #949494;
border-bottom: 1px solid #b9c0ca;


}
* html #menu2 {height: 1.4em;} /*haslayout so the background shows in IE6*/

#flash {
background-color: #949494;
color: #000;
padding-top: 1px;
margin-top: 0px;
position:relative;
z-index:1;
}


#footer {
  margin-left: 0;
  padding: 0 5px;
  border-top: 1px solid #b9c0ca;
  border-bottom: 1px solid #b9c0ca;
font-family: tahoma;
font-size: 11px;
padding: 5px;
text-align: left;
}

#footer p {
background-color: blue;
}


#menuh {
background-color: #6C7079;
border-top: 1px solid #B9C0CA;
border-bottom: 1px solid #B9C0CA;
color: #626B7E;
float:left;
width:100%;
}
#menuh li {
list-style: square;
position: relative;
float: left;
}
#menuh a {
float: left;
padding: 0 1em;
color: #FFFFFF;
text-decoration: none;
}
#menuh a:hover {
background-color: #37383D;
}
#menuh div{
padding:5px 0 0 0;
position: absolute;
top: 24px;
width:108px;
left: -999em;
background:url(fake.gif) no-repeat 0 0;/* use a 1px x 1px transparent gif*/
}
#menuh div ul {
background-color: #6C7079;
border: 1px solid #B9C0CA;
width: 100px;
padding: 0 4px;
float:left;
}
#menuh ul li {
width: 100px;
padding:4px 0;
border-bottom: 1px solid #B9C0CA;
}
#menuh ul li.last {
border-bottom: 0;
}
#menuh ul a {
padding: 0 4px 0 5px;
text-align: left;
float: none;
display: block;
line-height:1.2em!important;
height:auto!important
}
#menuh li:hover div, #menuh li.sfhover div {
left: 0px;
}
    Code (markup):
    Index.php
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="keywords" content="standout models, models, model agency, standoutmodels">

<title>Welcome to Standout Models - StandoutModels.com</title>

<meta name="title" content="Standout Models">
<meta name="description" content="Standout Models">
<meta name="author" content="Standout Models" />
<meta name="robots" content="FOLLOW, INDEX"/>

<meta name="copyright" content="A1Status">


<link href="models.css" rel="stylesheet" type="text/css" />


<style>
A:link {
	COLOR: white; TEXT-DECORATION: none
}
A:active {
	COLOR: white; TEXT-DECORATION: none
}
A:visited {
	COLOR: white; TEXT-DECORATION: none
}
A:hover {
	COLOR: white; TEXT-DECORATION: underline
}
</style>

<script language="JavaScript1.2">

//Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com

//Specify background images to slide
var bgslides=new Array()
bgslides[0]="1.jpg"
bgslides[1]="2.jpg"
bgslides[2]="4.jpg"
bgslides[3]="6.jpg"
bgslides[4]="5.jpg"
bgslides[5]="10.jpg"

//Specify interval between slide (in miliseconds)
var speed=2500

//preload images
var processed=new Array()
for (i=0;i<bgslides.length;i++){
processed[i]=new Image()
processed[i].src=bgslides[i]
}

var inc=-1

function slideback(){
if (inc<bgslides.length-1)
inc++
else
inc=0
document.body.background=processed[inc].src
}

if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideback()",speed)')

</script>





</head>

<body background="10.jpg">



<div id="topbar">
<img src="pix1.jpg"  class="imagebar">

<div id="header">
	
	
	<ul id="menu1">
		<li><a href="index.php">HOMEPAGE</a></li>
		<li><a href="talent.php">BROWSE TALENT</a></li>
		<li><a href="team.php">OUR TEAM</a></li>
		<li><a href="model.php">BECOME A MODEL</a></li>
		<li><a href="news.php">PRESS RELEASES</a></li>
		<li><a href="contact.php">CONTACT US</a></li>
	</ul>




</span>
</div>
    PHP:

    talent.php

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="keywords" content="standout models, models, model agency, standoutmodels">

<title>Welcome to Standout Models - StandoutModels.com</title>

<meta name="title" content="Standout Models">
<meta name="description" content="Standout Models">
<meta name="author" content="Standout Models" />
<meta name="robots" content="FOLLOW, INDEX"/>

<meta name="copyright" content="A1Status">


<link href="models.css" rel="stylesheet" type="text/css" />


<style>
A:link {
	COLOR: white; TEXT-DECORATION: none
}
A:active {
	COLOR: white; TEXT-DECORATION: none
}
A:visited {
	COLOR: white; TEXT-DECORATION: none
}
A:hover {
	COLOR: #0ED1E8; TEXT-DECORATION: underline
}
</style>



</head>

<body style="background: url(11.jpg)  no-repeat scroll center top ;  background-attachment: fixed;">


<div id="topbar">
<img src="pix1.jpg" class="imagebar">

<div id="header">
	
	
	<ul id="menu1">
		<li><a href="index.php">HOMEPAGE</a></li>
		<li><a href="talent.php">BROWSE TALENT</a></li>
		<li><a href="team.php">OUR TEAM</a></li>
		<li><a href="model.php">BECOME A MODEL</a></li>
		<li><a href="news.php">PRESS RELEASES</a></li>
		<li><a href="contact.php">CONTACT US</a></li>
	</ul>




</span>
</div>


<div id="details">
<br>
<table align="center" width=100%>
	<tr>
		<td>
		<a href="amy.php"><img src="models/2.jpg"></a>
		<br>
		<span style="font-size: 15px; font-family: tahoma; color: #0ED1E8"><a href="amy.php">Amy</a></span>
		</td>
		<td>
		<a href="me.php"><img src="models/11.jpg"></a>
		<br>
		<span style="font-size: 15px; font-family: tahoma; color: #0ED1E8"><a href="me.php">Leo</a></span>
		</td>
		<td>
		<a href="aggie.php"><img src="models/4.jpg"></a>
		<br>
		<span style="font-size: 15px; font-family: tahoma; color: #0ED1E8"><a href="aggie.php">Aggie</a></span>
		</td>
		<td>
		<a href="grace.php"><img src="models/7.jpg"></a>
		<br>
		<span style="font-size: 15px; font-family: tahoma; color: #0ED1E8"><a href="grace.php">Grace</a></span>
		</td>
	</tr>

	<tr>

		<td>
		<br>
		<a href="egle.php"><img src="models/3.jpg"></a>
		<br>
		<span style="font-size: 15px; font-family: tahoma; color: #0ED1E8"><a href="egle.php">Egle</a></span>
		</td>
		<td>
		<br>
		<a href="sarah.php"><img src="models/8.jpg"></a>
		<br>
		<span style="font-size: 15px; font-family: tahoma; color: #0ED1E8"><a href="sarah.php">Sarah</a></span>
		</td>
		<td>
		<br>
		<a href="nic.php"><img src="thumbs/6.jpg"></a>
		<br>
		<span style="font-size: 15px; font-family: tahoma; color: #0ED1E8"><a href="nic.php">Nicolle</a></span>		
		</td>
		<td>
		<br>
		<a href="dam.php"><img src="models/5.jpg"></a>
		<br>
		<span style="font-size: 15px; font-family: tahoma; color: #0ED1E8"><a href="dam.php">Damien</a></span>
		</td>
	</tr>
</table>
<br>

</div>

</div>
    PHP:
     
    le007, Dec 7, 2011 IP
  6. msm2010

    msm2010 Greenhorn

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6
    my skype: uaw20_02
    add my i help you
     
    msm2010, Dec 7, 2011 IP
  7. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #7
    I don't have skype. Thank you anyway.
     
    le007, Dec 7, 2011 IP
  8. msm2010

    msm2010 Greenhorn

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #8
    Describe in detail how it should look like.
     
    msm2010, Dec 7, 2011 IP
  9. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #9
    Basically, I would like the background to extend across the screen regardless of monitor or resolution size.
     
    le007, Dec 7, 2011 IP
  10. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #10
    If you zoom out on your browser - you will see the site's background images repeat themselves or there is white either side of them.
     
    le007, Dec 7, 2011 IP
  11. msm2010

    msm2010 Greenhorn

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #11
    ok
    a few minutes
     
    msm2010, Dec 7, 2011 IP
  12. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #12
    Thank you ",)
     
    le007, Dec 7, 2011 IP
  13. msm2010

    msm2010 Greenhorn

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #13
    delete of body (style="background: url("11.jpg") no-repeat fixed center top transparent;")
    lower body put
    <style type="text/css">
    <!--
        .fon_img {
         position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
        }
    .content {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    }
    -->
    </style>

      <img id="fon_img" class="fon_img" src="you_img" />
    <div class="content">
       <!--ALL content web site -->
      
    <div id="topbar">
        ........
    .......
    ......
    </div>

    </div>

    and modify js to change the image and not the background.
     
    Last edited: Dec 7, 2011
    msm2010, Dec 7, 2011 IP
  14. msm2010

    msm2010 Greenhorn

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #14
    you able to change js or help?
     
    msm2010, Dec 7, 2011 IP
  15. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #15
    Hi msm2010,

    thanks for your work but it didn't really work. The navbar won't extend to the end of the screen now and the main div content isn't centred on the page.

    The JS slides images not a background image so if you can get to work then that should work too. Thanks for your efforts :D

    Please see:
    http://www.standoutmodels.com/talent.php
     
    le007, Dec 7, 2011 IP
  16. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #16
    I just added "width: 100%;" to the content div and I think it works - can you please view it? :D :D :D
     
    le007, Dec 7, 2011 IP
  17. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #17
    I don't think that it's working :(

    For some reason there is an extra 3 inches to the right?
     
    le007, Dec 7, 2011 IP
  18. msm2010

    msm2010 Greenhorn

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #18
    in the sense of not working?
    change js minute. well as how to align the content is not a problem.
    what is the actual difficulties.
    it was necessary to create one background image on the whole page - I have done.
     
    msm2010, Dec 7, 2011 IP
  19. msm2010

    msm2010 Greenhorn

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #19
    What's wrong
    standoutmodels.com/talent.php   ??
    and home page need change js
     
    msm2010, Dec 7, 2011 IP
  20. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #20
    le007, Dec 7, 2011 IP
Page 1 of 2