Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Background image help dreamweaver CS5

  1. #1
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default Background image help dreamweaver CS5

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Technically you cannot use their image and css without their permission. But if it's just for an experiment, or will have no real impact on Yahoo's interests, you can.

    This is what they're doing in their stylesheet:

    Code:
    html{background:#7FB3CC url(http://l.yimg.com/sc/28201/answers2/images/a/i/us/sch/gr4/wide-site-bg.png) repeat-y 50% 0;}
    Oh, and the body's background is set to transparent.
    - John
    ________________________

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

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Defender90 (05-03-2013)

  4. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,886
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    I dont use Dreamweaver but if you go into code view you should be able to edit the CSS directly and center a background image withthis CSS;
    Code:
    html {
    background:url('path/to/img.jpg') 50% 50% no-repeat;
    }
    The html selector puts the image as part of the base web page background, but you can substitute in other selectors. For example, you could center the image in the background of a specific div using;
    Code:
    #mydiv {
    background:url('path/to/img.jpg') 50% 50% no-repeat;
    }
    The div markup would be <div id="mydiv"></div>
    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

  5. The Following User Says Thank You to Beverleyh For This Useful Post:

    Defender90 (05-03-2013)

  6. #4
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    Thanks....
    I wouldn't use the image. Just curious how it is done to apply something similar.

    Thanks to both of you for the advice. I will give it a try.

  7. #5
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    I got the image centered but the blue part of the image isn't going all the out to the edges right and left.

    Here is the css

    <style type="text/css">
    body {
    background-image: url(backjr5.gif);
    background-repeat: repeat-y 100% 0; ;
    background-position: center center;
    background-attachment: fixed;
    }
    </style>

    any ideas?
    Thanks

  8. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,886
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    I'm not really sure what you're trying to do - at the moment we have no idea what backjr5.gif (a small square tile? a long thin tile? a 'full size' image?) so it's very hard to visualise.

    The CSS you've posted will cause the image to completely cover and tile the entire screen. What exactly is "the blue part of the image" that you want to extend left and right? You can't manipulate individual portions of an image (only the whole image you're applying the CSS to) so it sounds like "the blue part" would need to be a second image to make that go left-to-right, with the other image in the middle staying centered and un-repeated?

    If you're trying to tile an image left to right, while still keeping it in the middle of the screen vertically, you would use
    Code:
    html {
    background:url('path/to/img.jpg') 100% 50% repeat-x;
    }
    But, to save us from confusion, please provide a link to your page, or at least attach the image(s) along with a mock-up image of the effect you're trying to achieve.
    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

  9. #7
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Beverleyh View Post
    I'm not really sure what you're trying to do - at the moment we have no idea what backjr5.gif (a small square tile? a long thin tile? a 'full size' image?) so it's very hard to visualise.

    The CSS you've posted will cause the image to completely cover and tile the entire screen. What exactly is "the blue part of the image" that you want to extend left and right? You can't manipulate individual portions of an image (only the whole image you're applying the CSS to) so it sounds like "the blue part" would need to be a second image to make that go left-to-right, with the other image in the middle staying centered and un-repeated?

    If you're trying to tile an image left to right, while still keeping it in the middle of the screen vertically, you would use
    Code:
    html {
    background:url('path/to/img.jpg') 100% 50% repeat-x;
    }
    But, to save us from confusion, please provide a link to your page, or at least attach the image(s) along with a mock-up image of the effect you're trying to achieve.
    Sorry about that!
    I grabbed the background image from the yahoo page to start experimenting. Don't have anything live.
    Here is the image taken from the yahoo page.
    Click image for larger version. 

Name:	wide-site-bg.jpg 
Views:	67 
Size:	932 Bytes 
ID:	5051

  10. #8
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    I think the image isn't wide enough. That must be it right? Just realized it. Sorry for the dumb Q.

    That didn't change anything actually. If you look at the yahoo page with the white center and the blue going out to the edges that is what I'm trying to do.
    Last edited by Defender90; 05-03-2013 at 06:42 PM.

  11. #9
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,886
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Oh, I'm following now.

    So the tile needs to go from top to bottom, with a totally blue background.
    Code:
    html {
    background:#80B4CC url('path/to/img.jpg') 50% 0% repeat-y;
    }
    So the hexidecimal colour value (#80B4CC) is just a colour slapped across the whole of the background - that makes things much easier as you don't need another image.

    "50% 0%" positions the image in the middle at the top (50% 50% would work for this kind of image too, but the tile would start in the middle and repeat outwards - 50% 0% repeats the tile from top to bottom).

    "repeat-y" tiles the image on the y axis (vertically).

    Also, note that Ive used the html selector as that will allow the image to tile the whole document. If you just use the body selector, the image will only tile that area of the page that initally loads on the screen - scroll down and the image stops dead. I expect you already descovered that though and use "background-attachment: fixed;" to try to resolve it
    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

  12. #10
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    Still can't seem to get this to work in dreamweaver. Is their a way to set this using HTML instead of CSS. Here is an image I made that I would like to have the gray extend out to the edges of the page both horizontal and vertical. The gray has a gradient so changing the background color shows. The attached yahoo page is the effect I'm going for. I'm not sure what I'm going wrong.

    Thanks
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	bg.jpg 
Views:	65 
Size:	880 Bytes 
ID:	5052  

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
  •