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.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need Help With Site/Background, Please!

    Hello. I will try and describe what I need my site to look like and hopefully someone will know what I am talking about and how to acheive it. Thank you very much in advance.

    I want the site to have a static background image and on top of that image I want a transpartnet black color where the actual site information/text/etc. will be.

  • #2
    New Coder
    Join Date
    Oct 2007
    Posts
    22
    Thanks
    0
    Thanked 4 Times in 4 Posts
    <div style="background: transparent url('first-image.gif')">
    <div style="background: transparent url('second-image.gif')">content</div>
    </div>

    if you need semi-transparent thing for the second one, either you will need to use png with hacks for ie or opacity style-sheet

    if you have issues post again

  • #3
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I want something like the following site (Just a random site used as a link to show the background and content moving on top of it in a sort of different section) http://www.bitemedogtreats.com/index.cfm. THank you

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Can you post a url to your background image you intend to use? If not attach it.

    I suggest you study html and css as this is pretty basic if you want to any kind of web design.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    here is an attachment to the image that my background will be. thank you.
    Attached Thumbnails Attached Thumbnails Need Help With Site/Background, Please!-paw_print_die_cut.jpg  

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!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=iso-8859-1">
    <title>Test page</title>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    background:#FFF url(paw_print_die_cut.jpg) center no-repeat fixed;
    height:100%;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:0.9em;
    }
    #grad {
    background:#000;
    opacity:0.6;
    height:100%;
    width:100%;
    position:fixed;
    z-index:0;
    }
    #content {
    color:#FFF;
    position:relative;
    z-index:1;
    }
    #content p {
    margin:0;
    padding:10px;
    text-align:justify;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    #grad {
    position:absolute;
    }
    </style>
    <script type="text/javascript">
    sizeIt = function()
    {
    	document.getElementById('grad').style.height = document.getElementById('content').offsetHeight + 'px';
    }
    if (window.attachEvent) window.attachEvent("onload", sizeIt);
    </script>
    <![endif]-->
    <!--[if IE]>
    <style type="text/css">
    #grad {
    filter:alpha(opacity=50);
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="grad"></div>
    <div id="content">
    	<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a urna. In eget velit. Vivamus nec ante. Fusce ut massa. Suspendisse dui pede, luctus vel, scelerisque sed, congue quis, ligula. Nam tristique, turpis ut malesuada pulvinar, nulla ante mollis odio, quis lacinia sapien orci vitae neque. Phasellus vel turpis id quam auctor facilisis. Ut non metus. Nunc suscipit dapibus nisi. Proin tempor sapien vulputate massa. </p>
    	<p> Phasellus laoreet, diam sed rhoncus hendrerit, risus mauris congue velit, sit amet convallis orci erat ac magna. Nunc id sem. Duis aliquet, ipsum ut consequat iaculis, leo pede fermentum enim, in tincidunt augue dolor nec urna. Aenean suscipit, nulla in laoreet nonummy, nisi lacus rhoncus nulla, eu porttitor arcu felis ultrices odio. Fusce ullamcorper justo quis metus. Mauris id felis nonummy erat bibendum mollis. Pellentesque sed ipsum eu nisl sodales ultricies. Phasellus pretium lorem nec ipsum. Aenean venenatis, justo vitae malesuada sollicitudin, lacus odio auctor massa, pretium suscipit purus ante a enim. Phasellus tincidunt augue vel arcu. Integer aliquet nonummy arcu. Suspendisse massa augue, semper eget, vulputate sed, mollis ut, turpis. Mauris lacus nibh, pellentesque eu, viverra et, auctor sit amet, mauris. </p>
    	<p> Suspendisse diam dui, molestie non, ultricies ac, aliquam id, eros. Suspendisse convallis dapibus purus. Pellentesque porttitor urna dictum nisi gravida dictum. Vestibulum in eros nec eros convallis adipiscing. Proin imperdiet tristique nulla. Quisque pede lectus, mollis in, elementum ac, vehicula non, lacus. Integer sit amet ligula at lorem laoreet gravida. Nam posuere, sem id accumsan aliquam, nisi diam pharetra nulla, et vehicula libero arcu vel diam. Vivamus venenatis, nisi eu tempor pretium, tellus libero blandit turpis, et suscipit est elit placerat risus. Ut ut est ac nulla vehicula sollicitudin. </p>
    	<p> Integer nonummy molestie est. Phasellus nonummy, ante at euismod feugiat, justo neque euismod massa, sit amet cursus ante sem vel erat. Aenean et est. Maecenas lobortis velit. Quisque sagittis sem sed lacus. Donec vestibulum, nulla eget cursus hendrerit, erat orci vehicula lectus, sed semper lorem lacus nec lectus. Nam sodales. Morbi molestie. In hac habitasse platea dictumst. Ut pretium nibh elementum arcu. Sed laoreet, lacus at venenatis vulputate, neque augue ornare mi, nec pellentesque lacus justo quis diam. Duis non arcu. Sed nec arcu et urna lobortis blandit. Maecenas ut tellus. Phasellus gravida orci ac elit. Quisque sagittis. Sed quis orci. </p>
    	<p> Vivamus rutrum. Duis ut eros eu metus interdum euismod. Mauris pulvinar scelerisque eros. Nam in nunc. Ut non nunc. Cras imperdiet euismod eros. Quisque blandit. Integer lacinia. Integer vitae felis. Fusce lectus. Donec condimentum nisl quis sapien. Praesent et nunc. Duis interdum, nulla ac mollis pulvinar, leo ante tempus arcu, nec bibendum est diam at lorem. Etiam dapibus, nisi sit amet egestas feugiat, tellus nunc ultricies dolor, ut sagittis magna eros ac ligula. Suspendisse neque turpis, lacinia nec, aliquet non, cursus pulvinar, pede. Maecenas sem quam, varius feugiat, dictum placerat, faucibus sit amet, nisi. </p>
    	<p> Proin fringilla sagittis arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla libero. Mauris vulputate dignissim dui. Fusce fringilla suscipit eros. Vivamus feugiat lectus vel velit. Nunc justo enim, dapibus commodo, congue quis, rutrum quis, nisl. Donec ornare enim sit amet diam. Etiam pharetra dignissim felis. Aenean eget leo. Praesent mi. Vivamus ligula lacus, facilisis sit amet, fringilla id, vestibulum a, urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra sodales lacus. </p>
    	<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nec diam. Proin mollis auctor purus. Sed venenatis. Donec consequat lorem non urna. Curabitur magna. Praesent venenatis. Etiam gravida fermentum nisi. Vestibulum at sem ut nulla luctus tempus. Sed et dolor. Suspendisse potenti. In varius ultricies nisl. Suspendisse lorem. Integer fermentum mauris lacinia felis tempor varius. Phasellus nisi. Quisque sagittis. Donec faucibus condimentum enim. Aenean interdum ultrices tortor. Nullam sagittis. Nullam adipiscing, elit non scelerisque sagittis, nibh diam rutrum nisl, eget vestibulum dui pede at nisl. </p>
    	<p> Donec tempus turpis sed enim. In a erat. Aliquam lorem. Duis eu arcu a arcu sagittis vehicula. Proin mi ligula, ultrices vel, consectetuer vel, molestie a, orci. Curabitur condimentum elit sit amet turpis. Quisque non libero at lorem nonummy consequat. Vivamus pharetra tempus odio. Sed gravida augue ut urna. Maecenas vehicula scelerisque lorem. Morbi lorem quam, vehicula nec, lobortis eget, sodales a, enim. </p>
    	<p> Sed ut pede. Proin eu tortor ut leo convallis imperdiet. Mauris blandit luctus purus. Phasellus at elit. Aliquam pulvinar aliquam velit. Nullam rutrum leo ut mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sapien. Nunc dictum leo et diam. Cras lectus tortor, pellentesque in, sollicitudin id, mollis non, elit. Cras libero risus, accumsan et, dapibus in, imperdiet dignissim, quam. Ut sed orci ut lectus mattis ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam eu arcu id nisl porta adipiscing. </p>
    	<p> Donec in libero lobortis lacus molestie consectetuer. Maecenas vehicula semper nunc. Nunc laoreet suscipit tellus. Suspendisse posuere varius tortor. In ac libero in massa pretium porttitor. Sed a ipsum. Maecenas faucibus. Sed ornare vestibulum elit. Curabitur iaculis, dui eu interdum dictum, nulla pede imperdiet augue, vitae tempus erat tellus nec dui. Vivamus mattis augue vitae risus. Aenean nisl. Phasellus convallis massa sit amet libero. Pellentesque placerat. Cras vel massa vitae libero volutpat fermentum. </p>
    </div>
    </body>
    </html>
    There are ways to fake position:fixed in IE6 however because you want the gradient effect you need to use JS to set the height of the opaque div equal to the height of the content.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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