SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help positioning a background image please

    Hello all.. I find my self here again asking for some help..

    I have an image (1054 x 709). I need to place on the right side of the body. Now my wrapper is 960px wide. I need the image to always be centered on the right edge of the wrapper. (so that half the book is in the wrapper (or rather behind, you understand what i mean i hope)

    The wrapper is centered (margin:auto).. and I can use the background image property to place the background image... but it moves as the windows size or resolution changes.

    and tips or solutions will be paid handsomely with beer and feasts (sent via mail ofc) :-)

    ty in advance

  2. #2
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    So do you want the image to be a background image for the body or for the wrapper?

    Whatever it is, it really shouldn't make a difference. Take a look at the magnificent background-position property!

    ~TehYoyo

  3. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    website.jpg

    dont know if this worked.. but if you can see what I mean from the picture.. I made the wrapper blue so you could see. The books should go on the body and stay divided between the wrapper and the right side.. regardless of resolution and windows size

  4. #4
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by alexellice View Post
    website.jpg

    dont know if this worked.. but if you can see what I mean from the picture.. I made the wrapper blue so you could see. The books should go on the body and stay divided between the wrapper and the right side.. regardless of resolution and windows size
    OK. So really what you want is to have the wrapper always directly split the books in half, no matter what?

    If so, take a look at these threads:
    http://www.sitepoint.com/forums/show...d+image+expand
    http://www.sitepoint.com/forums/show...d+image+expand

    Really, you can't have a flexible background image, although there are workarounds.

    ~TehYoyo

  5. #5
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yip, that is exactly what I want to do... and it PAINS me I can't figure it out (yet)... I did read the forum posts you linked.. while I am grateful for your help, I'm either too tired or too stupid to see the relevance atm :-(

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,754
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Here is how I would do it . Have the wrapper div, and inside place an empty <span></span> at the top of the wrapper. Give that something like this.

    Code:
    span.bgImage
    {
     position:absolute;
     top:0;
     right:-25%;
     width:xxx;
     height:xxx;
     background image URL;
    }
    If you want it to be semi see-through like in your image, you'll need opacity on it as well . It's hard to tell what it'll look like with the overlap. The wrapper will just need position:relative; and preferably a solid background color, like white, as you have in the image you attached .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ARRRRRRRRRRRRRRRRRRRRRRRRRRGH!

    really annoys me this!... I dont have time (got to go to work)... going to leae some markup and css for you guys to look at I need the top dark bar to be over the books)

    CSS
    Code:
    body{font-size:10pt;font-family:Tahoma, Arial; font-style:normal; font-weight:normal;color:#333;position:relative}
    h1, h2, h3 {font-family:Tahoma, Arial; font-style:normal; font-weight:normal}
    h1 {font-size:24pt;} 
    h2 {font-size:16pt;} 
    h3 {font-size:12pt;padding-bottom:10px}  
    strong {font-weight:700}
    em {font-style:italic}
    p {font-size:10pt;font-family:Tahoma, Arial; font-style:normal; font-weight:normal}  
    hr {color:#999; border-bottom-style:none}
    td {vertical-align:top;padding:2px}
    .bodyWrap{background-image:url('/assets/images/headerStrip.png');background-repeat:repeat-x;min-height:100%;min-width:100%;position:absolute;top:0px; left:0px}
    .wrapper{min-height:700px; width:940px; margin:auto;padding:10px;position:relative}
    span.bgImage{top:10px;right:-25%;width:1054px;height:709px;background-image:url('/assets/images/booksBG.jpg');}
    .header{width:940px; height:177px}
    .nav{width:940px; height:auto;}
    .spacer {min-height:30px;width:100%; clear:both}
    .footer{width:940px;}
    .footerSeg{width:215px;min-height:150px; padding:10px;float:left; line-height:1px}
    #mainMenu li {display:inline;padding-right:10px}
    #ulFooterMenu li {padding-top:2px}
    .footerAddress {line-height:15px}
    .headerAddress {line-height:15px;color:#fff;text-align:center}
    a:link{font-size:10pt;font-family:Tahoma, Arial; font-style:normal; font-weight:normal;color:#555;text-decoration:none}
    a:visited{font-size:10pt;font-family:Tahoma, Arial; font-style:normal; font-weight:normal;color:#555;text-decoration:none}
    a:hover{font-size:10pt;font-family:Tahoma, Arial; font-style:normal; font-weight:normal;color:#333}
    
    .menuLnk{font-size::10pt;font-family:Tahoma, Arial; font-style:normal; font-weight:normal;text-decoration:none;color:#333;}
    .menuLnk:hover{font-size::10pt;font-family:Tahoma, Arial; font-style:normal; font-weight:normal;text-decoration:none;color:#555;text-shadow: 1px 1px 3px #888;}
    .btnSearch{background-image:url('/assets/images/btnBG.png');color:#fff;height:30px; border:none; padding:5px;-moz-box-shadow: 0 0 15px 3px #cecece;
    -webkit-box-shadow: 0 0 15px 3px #cecece;box-shadow: 0 0 15px 3px #cecece;}
    .btnSearch:hover{background-image:url('/assets/images/btnBG.png');color:#fff;height:30px; border:none; padding:5px;-moz-box-shadow: 0 0 10px 2px #888;
    -webkit-box-shadow: 0 0 10px 2px#888;
    box-shadow: 0 0 10px 2px #888;cursor:pointer}
    Markup

    Code:
    <div id="wrapper2" style="position: absolute; width: 960px; min-height: 100%; margin: auto;">
            <span class="bgImage"></span>
        </div>
        <div class="bodyWrap">
        </div>
        <div class="wrapper">
            <div class="header">
                <div style="float: left">
                    <asp:ImageButton ID="lnkBtnLogo" ImageUrl="~/assets/images/logo.png" runat="server" />
                </div>
                <div style="float: right">
                    <p>
                        <asp:Label ID="lblHeaderAddress" CssClass="headerAddress" runat="server" /></p>
                </div>
            </div>
            <div style="clear: both">
            </div>
            <div class="nav">
                <ul id="mainMenu">
                    <li>
                        <asp:LinkButton ID="lnkHome" Text="Forside" runat="server" CssClass="menuLnk" OnClick="lnkHome_Click" /></li>
                    <li>
                        <asp:LinkButton ID="lnkGallery" Text="Galleri" runat="server" CssClass="menuLnk" />
                    </li>
                    <li>
                        <asp:LinkButton ID="lnkPodcast" Text="Podcasts" runat="server" CssClass="menuLnk" /></li>
                    <li>
                        <asp:LinkButton ID="lnkMember" Text="Bliv medlem" runat="server" CssClass="menuLnk"
                            OnClick="lnkMember_Click" /></li>
                    <li>
                        <asp:LinkButton ID="lnkContact" Text="Kontakt" runat="server" CssClass="menuLnk"
                            OnClick="lnkContact_Click" /></li>
                    <li>
                        <asp:TextBox ID="TextBox1" runat="server" Height="23px" />&nbsp<asp:Button ID="btnSearch"
                            Text="Søg" runat="server" CssClass="btnSearch" SkinID="none" /></li>
                </ul>
            </div>
            <div class="spacer">
            </div>
            <div style="min-height: 580px">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            <hr />
            <div class="footer">
                <div class="footerSeg">
                    <h3>
                        Adresse</h3>
                    <p>
                        <asp:Label ID="lblFooterAdr" CssClass="footerAddress" runat="server" /></p>
                    <asp:HyperLink ID="HyperLink1" NavigateUrl="~/contact.aspx" Text="Email" runat="server"
                        ToolTip="Kontakt os via email" CssClass="footerAddress" />
                </div>
                <div class="footerSeg">
                    <h3>
                        Menu</h3>
                    <ul id="ulFooterMenu">
                        <li>
                            <asp:LinkButton ID="LinkButton1" Text="Forside" runat="server" CssClass="menuLnk"
                                OnClick="lnkHome_Click" /></li>
                        <li>
                            <asp:LinkButton ID="LinkButton2" Text="Galleri" runat="server" CssClass="menuLnk" />
                        </li>
                        <li>
                            <asp:LinkButton ID="LinkButton3" Text="Podcasts" runat="server" CssClass="menuLnk" /></li>
                        <li>
                            <asp:LinkButton ID="LinkButton4" Text="Bliv medlem" runat="server" CssClass="menuLnk"
                                OnClick="lnkMember_Click" /></li>
                        <li>
                            <asp:LinkButton ID="LinkButton5" Text="Kontakt" runat="server" CssClass="menuLnk"
                                OnClick="lnkContact_Click" /></li>
                    </ul>
                </div>
                <div class="footerSeg">
                    <h3>
                        Bestyrelesen</h3>
                </div>
                <div class="footerSeg">
                    <h3>
                        Betengelse</h3>
                </div>
            </div>
        </div>

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,324
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    What I would do is make the books a background image and place that on the <body> element. The trick is to make the background image very wide but mostly transparent. In Photoshop, make a wide file (say around 1880px wide) with a transparent background (or a background that matches your site background color). Place the book image into this so that the middle of the book is 470px to the right of the center of the file (that is, half the width of the wrapper). Save this image for the web, and place it as the background image on the body element:

    Code:
    body {background: #color url(/assets/images/book.jpg) no-repeat 50% 0;}

  9. #9
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some times the simplest solutions are the ones that work the best. Your solution works 100%.. the file size for the image only increased by 1.1kb.

    Thank ralph.m and of course to the other contributing to the thread

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,324
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    You're welcome. Glad it was helpful.

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by alexellice View Post
    I have an image (1054 x 709).
    Too big for deployment on a website as a background. Ok... go on.

    Quote Originally Posted by alexellice View Post
    Now my wrapper is 960px wide.
    So the image is larger than the element being applied to, which can't be done... ok...

    Quote Originally Posted by alexellice View Post
    I need the image to always be centered on the right edge of the wrapper.
    Which one? Centered or right? There is no both!

    Even with the code you posted (that looks a dozen times more complex than necessary) for the life of me I can't figure out what it is you're even asking for -- though the size of the image in question ALONE means it's something I would advise against even trying to put on a website in the first place. "Not viable for web deployment" -- you might be best off leaving it at that.... especially with all that ASP giving you over-complex/pointless/wasteful non-semantic markup. Inlined presentation, clearing DIV, endless wrapping div for christmas only knows what, spacer div's likely doing padding or margin's job, nonsensical use of heading tags.... Ouch.

  12. #12
    SitePoint Member johnaalex's Avatar
    Join Date
    Apr 2012
    Location
    india
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    body
    {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:right;
    }
    Last edited by spikeZ; Apr 7, 2012 at 00:29.

  13. #13
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it working... (bg image ended up at about 80kb after further optimisations)... Totally agree about the markup.... When I'm finished coding I'll go back and revisit the markup. :-) Thx for your interest in my post though.


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
  •