Page 2 of 2 FirstFirst 12
Results 11 to 14 of 14

Thread: Background image help dreamweaver CS5

  1. #11
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    The way you'd do that is using this CSS;
    Code:
    html {
    background:#80B4CC url('path/to/img.jpg') 50% 0% repeat-y;
    }
    but substitute the hexidecimal colour value of your darkest grey instead of #80B4CC

    Is their a way to set this using HTML instead of CSS.
    Sorry, no - you need to use both. CSS needs to target an element in HTML, in this case the 'html' part references the entire web page document.

    The gray has a gradient so changing the background color shows.
    I'm not sure exactly what you mean. You could be referring to a transparency gradient or a flat colour gradient...

    Transparency gradient? - The tile is a jpg which means that it offers no alpha-transparency. Neither would a gif or png-8. The only web image format that would support alpha-transparency, and therefor result in a gradient where the background could potentially show through, is a png-24. You uploaded a jpg tile though so this wouldn't cause a see-through effect.

    Colour gradient? - You're probably not using an exactly colour match in the background and on the edge of the tile. Make sure you have sampled the outermost dark grey of your tile and substituted it into the CSS hexidecimal colour value referenced above, then that will give a seamless result like the Yahoo page.

    Another possible cause for a colour mismatch could be due to the speckled artefacts that are sometimes evident in jpgs. Try converting to a png-8 or gif format where any colour loss in the gradient should be more uniform and predictable.

    If you need any more help, please post a link to your page.
    Last edited by Beverleyh; 05-06-2013 at 02:00 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  2. #12
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    55
    Thanked 3 Times in 3 Posts

    Default

    Hi,

    Beginner here and was wondering how to center a background image like this page in dreamweaver.

    http://answers.yahoo.com/question/in...1070259AAeVxIa

    I take the image off this page and try to add it to my page in dream weaver using the HTML and CSS page properties and both ways it doesn't center it. It is cut off and to the left margin.

    Sorry for such a simple question

    Thanks
    @defender
    If you are looking to add that background image on your webpage ..
    Please run the following code in your browser and study it..Also please note to change the location of background image as your location.


    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=iso-8859-1" />
    <title>Untitled Document</title>
    
    
    <style>
    body{
    background-image:url(bg.jpg); background-repeat:repeat-y; margin:0px auto; background-position:center; background-color: #616161
    }
    .top{ background-color:#999999; width:590px; height:800px; margin:0px auto}
    </style>
    
    
    </head>
    
    <body>
    
    
    <div class="top"></div>
    
    
    </body>
    </html>

  3. #13
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    It's possible that the image you put in your post got changed. The forum sometimes makes images smaller. The one in your post is 620px wide. Applying that to the HTML element, adding a color to extend the image to the edges of the page, and using a transparent body (all like in the Yahoo example) and then adding a container div for the content of the page (probably like the Yahoo example). You would have this:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Background Demo</title>
    <style>
    html {
    	background-image: url(bg.jpg);
    	background-repeat: repeat-y;
    	background-position: center;
    	background-color: #626262;
    }
    body {
    	background: transparent;
    }
    .content {
    	width: 570px;
    	margin: 0 auto;
    }
    p {
    	text-indent: 1em;
    }
    </style>
    </head>
    <body>
    <div class="content">
    Your Page's Content goes here.
    <p>A shimmering philosopher promiscuously sounds out your blazing porpoises. Her ungrudging goblins laconically repair their puny locusts. Our whimpering pessimists roomily bemoan their shaking kangaroos. Her fumbling sparrows fruitfully mix up the cruel women. That enthusiastic pygmy addictively arrives at their hushed dear. Her high soliloquies fastidiously advise those substantial kings. Their disheartening toads ineffectually divide that refreshing defect. A contrasting penguin prominently loves your forgiving worshipers. His celibate kittens humorously heal her disbelieving dolphins. Her unrelenting players hoarsely exorcise her introductory storks.</p>
    </div>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #14
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    55
    Thanked 3 Times in 3 Posts

    Default

    The minimum width needed for the main layer is 970px; 570 and 590 both are incorrect.

Similar Threads

  1. Replies: 3
    Last Post: 12-30-2012, 02:58 PM
  2. Background Image Carousel won't load stuck on black background
    By accessotronik in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 10-15-2012, 02:23 PM
  3. Background Image Carousel background-size: cover; is not working
    By kerriluo in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-12-2012, 09:38 PM
  4. Replies: 0
    Last Post: 01-10-2012, 04:27 PM
  5. Replies: 5
    Last Post: 09-23-2007, 05:43 PM

Bookmarks

Posting Permissions

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