Need help positioning a background image please

HTML & CSS
1

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) :slight_smile:

ty in advance

2

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 [i]background-position[/i] property!

~TehYoyo

3

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

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:

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

~TehYoyo

5

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 :frowning:

6

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.


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 :).

7

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

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

<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

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:

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

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

You’re welcome. Glad it was helpful. :slight_smile:

11

Too big for deployment on a website as a background. Ok… go on.

So the image is larger than the element being applied to, which can’t be done… ok…

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

body
{
background-image:url(‘smiley.gif’);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right;
}

13

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. :slight_smile: Thx for your interest in my post though.