Problem with CSS backgrounds not showing on small screens.

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
davidhopkins
Forum Commoner
Posts: 41
Joined: Thu Jun 10, 2010 7:52 am

Problem with CSS backgrounds not showing on small screens.

Post by davidhopkins »

Hello all. I am trying to build out a basic webpage where i want the header background gradient to repeat across the screen, which it does at the moment.

I also have a wrapper that is 950px wide to centre all my content. The header background graident sits out side of this as i want that to repeat across the whole display.

My problem comes however when the screen resolution is smaller than 950px the header background gradient doesnt repeat out very well. It only repeats to how bit the resolution is, so for instnace it could show for 450px but then the other 500px would be blank, while the rest of my content is shown below, because of the wrapper.

My code is -
HTML

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8"/>
<title>Untitled Document</title>
</head>

<body>



<!-- Header Section -->

<div id="header">
	
    <div id="headerTop"></div>
    
    <div id="headerBottom">
    	<div class="wrapper">
        	<div id="headerTopNav">
            	<div id="headerTopNavLeft"></div>
                <div id="headerTopNavMiddle"></div>
                <div id="headerTopNavRight"></div>
            </div>
        </div>
    </div>
    
    

</div>

<!-- Close Header Section -->



<div class="wrapper">

<div id="bodyContainer">sdf</div>

</div><!--Close Wrapper-->

</body>
</html>
CSS

Code: Select all

@charset "utf-8";
/* CSS Document */

body{margin:0px; padding:0px;}
.wrapper {width: 950px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;}

#header{width:100%; height:125px; background:yellow; overflow:visible;}



#headerTop{width:100%; height:25px; 
background-color:#1E72BA;
background-image: -moz-linear-gradient(bottom , #1E72BA, #1A4E70 60px); 
background-image: -webkit-linear-gradient(bottom , #1E72BA, #1A4E70 60px); 
background-image: -o-linear-gradient(bottom , #1E72BA, #1A4E70 60px); 
background-image: -ms-linear-gradient(bottom , #1E72BA, #1A4E70 60px); 
background-image: linear-gradient(bottom , #1E72BA, #1A4E70 60px);}

#headerBottom{width:100%; height:100px; 
background-color:#E0E0E0;
background-image: -moz-linear-gradient(bottom , #E0E0E0, #FFFFFF 60px); 
background-image: -webkit-linear-gradient(bottom , #E0E0E0, #FFFFFF 60px); 
background-image: -o-linear-gradient(bottom , #E0E0E0, #FFFFFF 60px); 
background-image: -ms-linear-gradient(bottom , #E0E0E0, #FFFFFF 60px); 
background-image: linear-gradient(bottom , #E0E0E0, #FFFFFF 60px);}

#headerTopNav{height:35px; overflow:auto; float:right;}
#headerTopNavLeft{width:30px; height:35px; float:left; border-radius:0 0 0 35px;
background-color:#1E72BA;
background-image: -moz-linear-gradient(bottom , #1A4E70, #1E72BA 30px); 
background-image: -webkit-linear-gradient(bottom , #1A4E70, #1E72BA 30px); 
background-image: -o-linear-gradient(bottom , #1A4E70, #1E72BA 30px); 
background-image: -ms-linear-gradient(bottom , #1A4E70, #1E72BA 30px); 
background-image: linear-gradient(bottom , #1A4E70, #1E72BA 30px);}

#headerTopNavRight{width:30px; height:35px; float:right;border-radius:0 0 35px 0;
background-color:#1E72BA;
background-image: -moz-linear-gradient(bottom , #1A4E70, #1E72BA 30px); 
background-image: -webkit-linear-gradient(bottom , #1A4E70, #1E72BA 30px); 
background-image: -o-linear-gradient(bottom , #1A4E70, #1E72BA 30px); 
background-image: -ms-linear-gradient(bottom , #1A4E70, #1E72BA 30px); 
background-image: linear-gradient(bottom , #1A4E70, #1E72BA 30px);}

#headerTopNavMiddle{min-width:300px; height:35px; overflow:auto;float:left;
background-color:#1E72BA;
background-image: -moz-linear-gradient(bottom , #1A4E70, #1E72BA 30px); 
background-image: -webkit-linear-gradient(bottom , #1A4E70, #1E72BA 30px); 
background-image: -o-linear-gradient(bottom , #1A4E70, #1E72BA 30px); 
background-image: -ms-linear-gradient(bottom , #1A4E70, #1E72BA 30px); 
background-image: linear-gradient(bottom , #1A4E70, #1E72BA 30px);}


#bodyContainer{width:100%; min-height:300px; overflow:auto; background:#ccc;}
If u try viewing that on ur computer, and drag the browser to under 950px the header stops showing, while the content will carry on.

Is there any simple fix?

I would rather not use an image as the heaader and attach it to the body as i need to do this process in other places aswell

Thanks
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Problem with CSS backgrounds not showing on small screen

Post by pickle »

I'm having trouble visualizing the problem - can you attach some screenshots?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply