SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cant get background image to dispaly how i'd like :-(

    Buongiorno from 1 degrees C snowy Wetherby UK..

    On this page http://tutorial.davidclick.com/curvy.html & illustrated here http://i216.photobucket.com/albums/c...ps95f25ea0.jpg I'm trying to get this image http://i216.photobucket.com/albums/c...ps87f351ae.jpg to site vertically just outsode the wrapper left & right. But Ive encountered two obstacles:

    1. The sale image is getting chopped off by height of the header which i cant understand
    2. Whats the most efficient way of getting the Sale image to appear on the right handside aswell.

    Grazie Tanto,
    David
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Zygoma, Try this and see if it works for you.

    FYI: Indenting code is a helpful way to keep track of the structure as the page is being built. Better than obscure/misplaced comments.
    Code:
    <!doctype html>
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?959153-Cant-get-background-image-to-dispaly-how-i-d-like-%28
    Thread: Cant get background image to dispaly how i'd like :-(
    2013.01.21 09:06
    Zygoma
    http://i216.photobucket.com/albums/cc53/zymurgy_bucket/sale-logo_zps87f351ae.jpg  ("sale" image)
    -->
    <head>
        <title>Curvy-1d</title>
        <link rel="stylesheet" href="curvy.css" /> 
    </head>
    <body>
    <div id="wrapper">
        <div class="saleleft"></div>
        <div class="saleright"></div>
        <div id="header">
            <h1>Curvy Corners</h1>
            <p>"Turn Hazardous Workplace Corners Soft"</p>
        </div>
        <div id="content-wrap">
            <div id="column1">
                <h2>Welcome</h2>
                <p>Featured on BBC's Dragons Den our easy to apply quick fix bumpers can tame any sharp corner soft</p>
            </div>
            <div id="column2">
                <p>Column 2</p>
            </div>
            <div id="footer">
                <p>Footer</p>
            </div>
        </div>
    </div>
    </body>
    </html>
    Add the following to your css:
    Code:
    .saleleft,
    .saleright {
        background-image:url(sale-logo.jpg);
        background-repeat:no-repeat;
        width:150px;
        height:338px;
    }
    .saleleft {
        float:left;
        margin-left:-160px;     /* sets distance of image from edge of #wrapper */
    }
    
    .saleright {
        float:right;
        margin-right:-160px;    /* sets distance of image from edge of #wrapper */
        -ms-transform:rotate(180deg);       /* IE 9 */
        -moz-transform:rotate(180deg);      /* Firefox */
        -webkit-transform:rotate(180deg);   /* Safari and Chrome */
        -o-transform:rotate(180deg);        /* Opera */
        transform:rotate(180deg);
    }
    
    
    #content-wrap {
        margin:2px 0 0 -2px;    /* changed to compensate for border width */
    }

  3. #3
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zygoma View Post
    Buongiorno from 1 degrees C snowy Wetherby UK..

    On this page http://tutorial.davidclick.com/curvy.html & illustrated here http://i216.photobucket.com/albums/c...ps95f25ea0.jpg I'm trying to get this image http://i216.photobucket.com/albums/c...ps87f351ae.jpg to site vertically just outsode the wrapper left & right. But Ive encountered two obstacles:

    1. The sale image is getting chopped off by height of the header which i cant understand
    2. Whats the most efficient way of getting the Sale image to appear on the right handside aswell.

    Grazie Tanto,
    David
    You can change code CSS following

    HTML Code:
    #sale {
        background-attachment: fixed;
        background-image: url("sale-logo.JPG");
        background-position: 150px 10px;
        background-repeat: no-repeat;    
    }
    change
    HTML Code:
    #sale {
        background-attachment: fixed;
        background-image: url("sale-logo.JPG");
        background-position: 150px 10px;
        background-repeat: no-repeat;
        display: block;
        overflow: hidden;
        position: relative;
    }
    Hope will help you!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,496
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ron has given you a good example of how to do it but I thought I'd clarify what is happening.

    The image on the left is truncated because the content wrap is floated and thus the background of the parent will only extend as far as its non floated content. You need to apply some containing mechanism to #wrapper or indeed don't float the content-wrap as its not needed to float.

    Code:
    #content-wrap{float:none}
    The overflow:hidden in the reply above would also clear the floats and allow the image to be seen but only as long as the element is over that section of the viewport where the fixed background is placed. A fixed positioned background is always placed in relation to the viewport and will only show in the element when the position of the element co-insides with the background-position the image resides in on the viewport. As Rons example shows you don't really and a fixed background position anyway unless you were attempting to keep those images visible while the page scrolls and then you'd need a different technique anyway.

  5. #5
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you guys that worked but i have a question please... http://tutorial.davidclick.com/curvy.html

    How come both banners are successfully rotated 180 degrees when the CSS code only instructs ine .saleright image to re orientatate as the screen grab illustrates:
    http://i216.photobucket.com/albums/c...ps0cf865a9.jpg
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,496
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I can only see the right banner transformed?

  7. #7
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ive clearly had too many coffees today & cant see straight I'll look at this another day, thanks for taking a look :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  8. #8
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Damn yes i see this now, oops. Big thank you for all the help on this :-)

    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


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
  •