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

**Zygoma** · Jan 21, 2013 08:06

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

**ronpat** · Jan 21, 2013 18:50

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 */
}

**thietkewebtopx** · Jan 22, 2013 00:25

Originally Posted by Zygoma

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!

**Paul O'B** · Jan 22, 2013 03:17

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.

**Zygoma** · Jan 29, 2013 08:31

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

**Paul O'B** · Jan 29, 2013 08:58

I can only see the right banner transformed?

**Zygoma** · Jan 29, 2013 11:06

Ive clearly had too many coffees today & cant see straight I'll look at this another day, thanks for taking a look :-)

**Zygoma** · Jan 29, 2013 11:08

Damn yes i see this now, oops. Big thank you for all the help on this :-)

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions