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

HTML & CSS
1

Buongiorno from 1 degrees C snowy Wetherby UK…

On this page http://tutorial.davidclick.com/curvy.html & illustrated here http://i216.photobucket.com/albums/cc53/zymurgy_bucket/jinxed-sale-position_zps95f25ea0.jpg I’m trying to get this image http://i216.photobucket.com/albums/cc53/zymurgy_bucket/sale-logo_zps87f351ae.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

2

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.


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


.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 {
    [COLOR="#0000FF"]margin:2px 0 0 -2px[/COLOR];    /* changed to compensate for border width */
}
3

You can change code CSS following

#sale {
    background-attachment: fixed;
    background-image: url("sale-logo.JPG");
    background-position: 150px 10px;
    background-repeat: no-repeat;    
}

change

#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

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.


#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

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:

723×514 50.8 KB

6

I can only see the right banner transformed?

7

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

8

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