Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Jan 2013
    Posts
    37
    Thanks
    1
    Thanked 3 Times in 3 Posts

    Background Image and Text

    Hi,

    Very new to CSS and im position text and navigation menu over a png background image.

    I can get all the alignment ok and as soon as i restore my browser they no longer align.

    How can i get this to stay aligned to the background image regardless of Resolution or size of browser?

    HTML Code:
    Code:
    <!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" />
    <title>Make IT Work Computers</title>
    <link href="Style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <h1 class="pos_right">Make IT Work</h1>
    <h1 class="sml">Computers</h1>
    <div id="logo"></div>
    <div id="navigation" class="nav_position">
    <a href="#">Home</a>|
    <a href="#">About Us</a>|
    <a href="#">Services</a>|
    <a href="#">Shop</a>|
    <a href="#">Contact Us</a>
    </div>
    <p><h2>Welcome</h2></p>
    </body>
    </html>
    CSS:
    Code:
    /* Background, font and general customisations */
    body { 
    margin:110px 500px;
    font-size:1em;
    font-family: "Myriad Pro", "Trebuchet MS", Arial; 
    font-size:14px; 
    background: url(images/background.png);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center; 
    background-color:#000000;
    }
    p { 
    padding-top:-125px;
    padding-bottom:25px;
    padding-right:50px;
    padding-left:50px;
    }
    
    a:hover { text-decoration:underline;}
    
    p { padding: 0 10px 5px 10px; }
    
    /* Headers and List */
    h1 { 
    font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
    font-size: 36px;
    font-weight: bold;
    color: #13869b;
    text-align: left;
    padding:3px 0 0 10px;
    }
    h1.pos_right
    {
    position:relative;
    left:220px;
    top:45px;
    }
    h1.sml
    {
    font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
    font-size: 36px;
    font-weight: bold;
    color: #13869b;
    text-align: left;
    position:relative;
    top:10px;
    left:370px;
    }
    h2 {
    font-family: Georgia, &quot;Times New Roman&quot;, Times, serif; 
    font-size: 16px; 
    font-weight: bold; 
    color: #ffffff;
    border-bottom: 1px solid #ffffff; 
    }
    li { 
    list-style-type: none; 
    line-height: 150%; 
    list-style-image: url(images/list.png); 
    }
    li a:link { 
    color: #13869b; 
    text-decoration: none; 
    font-weight: bold; 
    } 
    li a:hover { 
    display: block; 
    color: rgb(0, 96, 255); 
    padding-bottom: 5px; 
    font-weight: bold; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    border-bottom-color: #169ab2; 
    } 
    li a:visited { 
    color: #13869b; 
    text-decoration: none; 
    font-weight: bold; 
    }
    
    /* Navigation */ 
    #navigation {
    font-family: "Myriad Pro", "Trebuchet MS", Arial; 
    font-size: 26px; 
    font-weight: bold;
    width:700px;
    height:50px; 
    margin: 0 auto;
    clear:both;
    /* border:1px 
    solid #169ab2; */ 
    text-align:center; 
    color:#fff; 
    padding-top:4px;}
    #navigation.nav_position
    {
    position:relative;
    left:150px;
    top:-215px;
    }
    #navigation a { 
    color:#fff;
    text-transform:uppercase; 
    font-size:14px; 
    font-weight:bold; 
    text-decoration:none; 
    margin:0 20px; 
    margin-top:3px;}
    #navigation a:hover{ color:#169ab2}
    
    /* Images and Logo */
    #logo {
    text-decoration:none;
    border:0;
    width : 269px;
    height : 207px;
    margin : 0;
    padding : 0;
    background : url(images/logo.png) no-repeat 0 0;
    position:relative;
    left:-50px;
    top:-120px;
    }
    
    
    /* Links */
    a:link { 
    color: #13869b; 
    text-decoration: underline; 
    font-weight: bold; 
    } 
    a:visited { 
    color: #13869b; 
    text-decoration: underline; 
    font-weight: bold; 
    } 
    a:hover { 
    color: #169ab2; 
    padding-bottom: 5px; 
    font-weight: bold; 
    text-decoration: underline; 
    } 
    a:active { 
    color: rgb(255, 0, 102); 
    font-weight: bold; 
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Exodus_AU,
    Put your background in a centered containing element and put your site in that instead of body.
    Do you really need all that positioning? I think it would be better to let the document flow naturally. If you did want to position something the #container should be relative and the element you're positioning should be absolute.

    See this quick demo on positioning.

    And start with something like this -
    Code:
    <!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, html {
    	margin: 0;
    	background: #fc6;
    	font: 100% "Myriad Pro", "Trebuchet MS", Arial;
    	color: #fff;
    }
    #container {
    	height: 600px;
    	width: 1000px;
    	margin: 110px auto;
    	position: relative;
    	z-index: 1;
    	background: #000 url(images/background.png) no-repeat fixed center;
    	font-size: 1em;
    }
    	h1.sml {margin: 10px 0 0 130px;}
    	h1.pos_right {margin: 0 0 0 10px;}
    	h1 {
    		float: left;
    		clear: left;
    	}
    #logo {
    	height: 207px;
    	width: 269px;
    	position: absolute;
    	left: 150px;
    	top: -50px;
    	z-index: -1;
    	background: #f00 url(images/logo.png) no-repeat 0 0;
    }
    #navigation {
    	height: 50px;
    	width: 700px;
    	float: right;
    	background: #6fc;
    }
    	h2 {
    		width: 100%;
    		position: absolute;
    		bottom: 0;
    		left: 0;
    		border-bottom: 1px solid #fff;
    	}
    </style>
    </head>
    <body>
        <div id="container">
            <h1 class="sml">Computers</h1>
            <h1 class="pos_right">Make IT Work</h1>
            <div id="logo"></div>
                <div id="navigation" class="nav_position">
                    <a href="#">Home</a>|
                    <a href="#">About Us</a>|
                    <a href="#">Services</a>|
                    <a href="#">Shop</a>|
                    <a href="#">Contact Us</a>
                </div>
            <h2>Welcome</h2>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jan 2013
    Posts
    37
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Hi Excavator,

    Thanks for the reply and i see what you mean by letting it flow more naturally. Thanks.

    Having the background in a container didn't resolve my issue for example.

    I have the background image which should be center and adjust according to the resize (which is working).

    I then insert my logo onto a certain area of the page where it should over lap the top corner of the background image (same as with my text/title and navigation).

    When i resize the page the background resizes accordingly however the images/texts etc all move off of the background image.

    I will try and upload the site for you to see.

  • #4
    New Coder
    Join Date
    Jan 2013
    Posts
    37
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Hi,

    I have loaded it up: http://mitwc.com.au/Test/index.html

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Your background doesn't resize. It moves around when the browser is resized but the image remains 1024x768.

    Look at it like this once -
    Code:
    #container {
                background: url(images/background.png);
    		        
    		        position:relative;
    		        z-index:1;
                margin:0 auto; 
    		        width:1024px;
    		        height:768px;
                }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Jan 2013
    Posts
    37
    Thanks
    1
    Thanked 3 Times in 3 Posts
    OK I see what you mean, sorry im so noob...

    Can you see how the text doesnt fit to the background though?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Exodus_AU View Post
    OK I see what you mean, sorry im so noob...

    Can you see how the text doesnt fit to the background though?
    Look in my first post how I floated your headings and how the margins push them around. Floats are how we put elements beside each other...have a look at a float tutorial here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Jan 2013
    Posts
    37
    Thanks
    1
    Thanked 3 Times in 3 Posts
    OK thanks, i still have your float from the first post on the CSS and it does move from left to right when resizing just not up and down (same as logo).

    I might start my code from scratch in case something i originally had is causing an issue.

    I will let you know tonight.

  • #9
    New Coder
    Join Date
    Jan 2013
    Posts
    37
    Thanks
    1
    Thanked 3 Times in 3 Posts
    OK,

    I started with the code you put in the first post and the Background just moves around (if i view on a 27" monitor it cuts the bottom off the image).

    I then changed the size of the image so that that was working.

    The Text i used a float as you stated and it is floating well when i resize and change my broswer from Left to Right however not up and down.

    It does not stay aligned to where the bg image is on the page.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    So many things affect a site there is no way to tell what's happening without looking at it. A link to the test site with the most recent version of your code would be best.

    Posting your entire code here in the forum will work too, just not as well.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New Coder
    Join Date
    Jan 2013
    Posts
    37
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Hi Excavator,

    I really appreciate your patience on this.

    I have uploaded the updated site: http://mitwc.com.au/Test/index.html

    My issue is that the Title and Logo all works correctly now (YAY) but the footer using the same code as the header doesnt follow the resize like the rest does.

    HTML:
    Code:
    <!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" />
    <title>Make IT Work Computers</title>
    <link href="Style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="container">
    	<div id="bgimg"></div>
    	<div id="logo"></div>
    	<div id="header1">Make IT Work</div>
    	<div id="header2">Computers</div>
    	<div id="navigation" class="nav_position">
    		<a href="#">Home</a>|
        	<a href="#">About Us</a>|
        	<a href="#">Services</a>|
        	<a href="#">Shop</a>|
        	<a href="#">Contact Us</a>
    	</div>
    </div>
    <div id="footer">Copyright &copy; 2010 Make IT Work Computers</div>
    </body>
    </html>
    CSS:
    Code:
    body 
    	{
    		text-align:center;
    		margin:0;
    		background-color:#000000;
    	}
    
    #container
    	{
    		position:relative;
    		width: 1024px;
    		margin-top: 0px;
    		margin-left: auto;
    		margin-right: auto;
    		text-align:left; 
    	}
    
    #bgimg
    	{
    		position:absolute; 
    		overflow:hidden; 
    		left:0px; 
    		top:17px; 
    		width:1024px; 
    		height:768px; 
    		z-index:0;
    		background: url(images/background.png);
    		border=0;
    		width=1024;
    		height=768
    	}
    
    #logo
    	{
    		position:absolute;
    		overflow:hidden; 
    		left:8px; 
    		top:30px; 
    		width:269px; 
    		height:207px; 
    		z-index:1;
    		background: url(images/Logo.png);
    		border=0;
    		width=269;
    		height=207;
    	}
    
    #header1
    	{
    		position:absolute; 
    		overflow:hidden; 
    		left:287px; 
    		top:54px; 
    		width:402px; 
    		height:90px; 
    		z-index:2;
    		font-size: 40px;
    		font-family: Arial,Helvetica,Sans-Serif;
    		font-style: normal;
    		font-weight: bold;
    		color:#13869b;
    	}
    	
    #header2
    	{
    		position:absolute; 
    		overflow:hidden; 
    		left:470px; 
    		top:91px; 
    		width:221px; 
    		height:90px; 
    		z-index:3;
    		font-size: 37px;
    		font-family: Arial,Helvetica,Sans-Serif;
    		font-style: italic;
    		font-weight: normal;
    		color:#13869b;
    	}
    
    #footer
    	{
    		position:absolute; 
    		overflow:hidden; 
    		left:326px; 
    		top:745px; 
    		width:800px; 
    		height:90px; 
    		z-index:5;
    		font-size: 19px;
    		font-family: Arial,Helvetica,Sans-Serif;
    		font-style: normal;
    		font-weight: normal;
    		color:#ffffff;
    	}
    		
    /* Navigation */ 
    #navigation 
    	{
    		font-family: "Myriad Pro", "Trebuchet MS", Arial; 
    		font-size: 26px; 
    		font-weight: bold;
    		width:700px;
    		height:50px; 
    		margin: 0 auto;
    		clear:both;
    		/* border:1px 
    		solid #169ab2; */ 
    		text-align:center;  
    		color:#fff; 
    		padding-top:4px;
    	}
    #navigation.nav_position
    	{
    		position:relative;
    		left:150px;
    		top:135px;
    	}
    #navigation a 
    	{ 
    		color:#fff;
    		text-transform:uppercase; 
    		font-size:14px; 
    		font-weight:bold; 
    		text-decoration:none; 
    		margin:0 20px; 
    		margin-top:3px;
    	}
    #navigation a:hover
    	{ 
    		color:#169ab2
    	}

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Your ap #footer is outside of relative #container so it is not positioned by that element.

    Move #container's closing </div> further down in your markup so #footer is enclosed as well.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Exodus_AU (01-03-2013)

  • #13
    New Coder
    Join Date
    Jan 2013
    Posts
    37
    Thanks
    1
    Thanked 3 Times in 3 Posts
    oh man, how did i miss that?!

    Thanks heaps man, sorry this is my first website :S

    I will continue browsing this site to learn

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Exodus_AU View Post
    oh man, how did i miss that?!

    Thanks heaps man, sorry this is my first website :S

    I will continue browsing this site to learn
    This is a great site to learn - lots of smart people here!

    While you're looking around, check out the links about validation in my signature line. Both the validators can really help you a lot.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    New Coder
    Join Date
    Jan 2013
    Posts
    37
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Will do! Again, thank you very much. I appreciate you spending the time with me even as basic as it was!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •