Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Junior Member
    Join Date
    Jul 2011
    Posts
    18
    Member #
    28659
    Liked
    1 times
    Being fairly new to CSS, I'm having a little difficulty with the ins and outs of some positioning code. I've read quite a few blog posts on this issue but have found no definitive answer that has worked for me.

    I have a full bleed background image and an inline link list with background PNG boxes with low opacity.
    page:http://thenally.com/

    My problems are twofold:
    1)
    The image is 1920px by 1200px and ideally would not be zoomed in as it appears on my display (1440x900). I want the image to appear with minimal overflow, centered as it currently is with no scaling and no change in aspect ratio when the browser window shrinks. I can easily re-size the image but I want it to be as big as possible on all monitor sizes. I know perfection is a pipe dream, but right now I'm not getting it right.
    2)
    When I re-size the page or zoom out, the title/list and bg image don't stay together. The image stays top centered while the text moves to the upper left corner.

    Any help would be appreciated, my CSS is included below!

    Code:
    
    /*Body background image and positioning.*/
    
    body
    {
    background-attachment:fixed;
    padding:0px;
    margin:0px;
    background-color:#FFFFFF;
    background-image:url(Images/cranes_hd.jpg);
    background-repeat:no-repeat;
    background-position:center top;
    display:table;
    overflow:hidden;
    }
    
    /*Background PNG images and positioning.*/
    
    #opacityrec1
    {
    position: fixed;
    top:160px;
    left:272px;
    }
    
    #opacityrec_contact, #opacityrec_resume, #opacityrec_portfolio, #opacityrec_thesis
    {
    position: fixed;
    top:220px;
    left:272px;
    }
    
    /*Links styles.*/
    
    .type1 A:link {text-decoration:none; color: #ea4c24;}
    .type2 A:link {text-decoration:none; color: #000000;}
    
    .type1 A:visited {text-decoration:none; color: #ea4c24;}
    .type2 A:visited {text-decoration:none; color: #000000;}
    
    .type1 A:active {text-decoration:none; color: #ea4c24;}
    .type2 A:active {text-decoration:none; color: #000000;}
    
    .type1 A:hover {text-decoration:none; color: #000000;}
    .type2 A:hover {text-decoration:none; color: #000000;}
    
    /*List styles.*/
    
    #main_list
    {
    width:600px;
    height:40px;
    white-space: nowrap;
    }
    
    #main_list li.words
    {
    position: relative;
    display:block;
    float:left;
    text-align:center;
    width:75px;
    list-style-type: none;
    padding:0px;
    }
    
    #main_list li
    {
    position: relative;
    display:block;
    float:left;
    width:10px;
    text-align:center;
    width: 5px;
    list-style-type: none;
    padding:0px;
    }
     
    /*Text styles.*/
    
    h1, h2
    {
    position: fixed;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    line-height: 25px;
    white-space: nowrap;
    }
    
    h1
    {
    left:290px;
    top:152px;
    font-size: 20px;
    color:#000000;
    }
    
    h2
    {
    left:400px;
    top:150px;
    font-size: 10px;
    color:#ea4c24;
    }

  2.  

  3. #2
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    insert this code into your body tag in css
    Code:
    	margin:0;
    	padding:0;
    	background: url(../images/bg.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
    Also make your background image 1024x768 but at a highish res, like 120dpi or maybe abit less.

    The code is designed to auto expand the background image out no matter what size the screen is.

    Hope this helps
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  4. #3
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    Just read your other issue.

    For the menu to appear centralised where it is you have 2 choices. Create a container div to hold it or...try this code.

    Code:
    #main_list
    {width:960px; height:40px; white-space: nowrap;
    margin:auto;}
    Hope this helps too.
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  5. #4
    Junior Member
    Join Date
    Jul 2011
    Posts
    18
    Member #
    28659
    Liked
    1 times
    Thanks alot m3n, I'll try it out and post the results!
    m3n0tu18 likes this.

  6. #5
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    Quote Originally Posted by HUMMIKE, post: 213605
    Thanks alot m3n, I'll try it out and post the results!
    No problemo
    HUMMIKE likes this.
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  7. #6
    Junior Member
    Join Date
    Jul 2011
    Posts
    18
    Member #
    28659
    Liked
    1 times
    I love that background image code, although it might not work in this case just because on resize, the changing image affects the legibility of the text. I'll definitely be saving it though...how is CSS3 with browser compatibility?


    What I currently have on the site (LINK) is the best I've managed so far for this scenario. I don't have a monitor with very large resolution at my disposal to check it out. Would it be possible to write some simple IF function (javascript??) that uses your previous code only if the window is bigger than the size of the image?? Not sure, I'm a little out of my depth there.... Finally, is there an easy way to take what I have on the site (background and everything) and center it? The snippet for the <ul id="main_list"> didn't seem to change anything.

    Code:
    /*
    HOMEPAGE (Michael Nally): Written by Michael Nally, Copyright 2011.
    */
    
    /*Body background image and positioning.*/
    
    body
    {
    margin: 0;
    padding:0;
    background: url('Images/cranes_hd.jpg');
    width: 100%;
    display: table;
    background-repeat:no-repeat;
    min-width:100%;
    }
    
    /*Content background PNG images and positioning.*/
    
    #opacityrec1
    {
    position: fixed;
    top:160px;
    left:550px;
    }
    
    #opacityrec_contact, #opacityrec_resume, #opacityrec_portfolio, #opacityrec_thesis
    {
    position: fixed;
    top:220px;
    left:550px;
    }
    
    /*Links styles.*/
    
    .type1 A:link {text-decoration:none; color: #ea4c24;}
    .type2 A:link {text-decoration:none; color: #000000;}
    
    .type1 A:visited {text-decoration:none; color: #ea4c24;}
    .type2 A:visited {text-decoration:none; color: #000000;}
    
    .type1 A:active {text-decoration:none; color: #ea4c24;}
    .type2 A:active {text-decoration:none; color: #000000;}
    
    .type1 A:hover {text-decoration:none; color: #000000;}
    .type2 A:hover {text-decoration:none; color: #000000;}
    
    /*List styles.*/
    
    #main_list
    {
    width:960px;
    height:40px;
    white-space: nowrap;
    margin:auto;
    }
    
    #main_list li.words
    {
    position: relative;
    display:block;
    float:left;
    text-align:center;
    width:75px;
    list-style-type: none;
    padding:0px;
    }
    
    #main_list li
    {
    position: relative;
    display:block;
    float:left;
    width:10px;
    text-align:center;
    width: 5px;
    list-style-type: none;
    padding:0px;
    }
     
    /*Text styles.*/
    
    h1, h2
    {
    position: fixed;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    line-height: 25px;
    white-space: nowrap;
    }
    
    /*Below are individual text styles.*/
    
    h1
    {
    left:570px;
    top:152px;
    font-size: 20px;
    color:#000000;
    }
    
    h2
    {
    left:680px;
    top:158px;
    font-size: 10px;
    color:#ea4c24;
    }

  8. #7
    Junior Member Amber Ingraham's Avatar
    Join Date
    Jul 2011
    Location
    Iowa
    Posts
    26
    Member #
    28702
    Liked
    8 times
    Hi Mike. I don't know if this has been fixed since your last post on Monday, but here's my two cents. I've found the best way to scale images and text at the same time on a page is to completely put everything in a table. Make the background a <td> background, and use percentages on everything. Using percentages on your table makes things scale with browser size and monitor size.

  9. #8
    Junior Member
    Join Date
    Jul 2011
    Posts
    18
    Member #
    28659
    Liked
    1 times
    Hi Amber,

    I Really appreciate the advice, I haven't investigated table backgrounds before. I'll try that route for a while.

    Thanks,

    Mike

  10. #9
    Junior Member Amber Ingraham's Avatar
    Join Date
    Jul 2011
    Location
    Iowa
    Posts
    26
    Member #
    28702
    Liked
    8 times
    Good luck with it, there's a variety of information on table backgrounds on the web. Try out google if you have problems with it scaling. I've been working on my own website and have been doing the table method. So far, so good. Let me know if you need any more help!
    HUMMIKE likes this.


Remove Ads

Posting Permissions

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

Search tags for this page

css full bleed image

,

full bleed backgrounds

,

full bleed on website photo size

,

full bleed photo website dimensions

,

html make my table full bleed

,

website size and bleed

,

what size for website full bleed pics

,

why does my web page bleed to the background

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:13 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com