SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast Angrypoonani's Avatar
    Join Date
    Mar 2011
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Background Image Positioning from the CSS file

    What I'm trying to do is position my background image with css so it looks as if the bottom of my pageContent has torn paper for a border.

    Is there any way to further position the image after I've defined the position as 'bottom center'. I need the bottom border of every page to be the torn paper image.

    HTML:
    Code:
    Code:
    <div id="content-middle" style="height: 682px;">
    <div id="pageContent" class="container">
    <div> </div>
    <h2 class="titleHeader"> Products </h2>
    <div class="pageNote">
    <p>
    <input height="128" width="730" type="image" src="header image" longdesc="undefined">
    </p>
    <div style="font-size: 25px; padding-left: 15px;">
    <img class="disp1" alt="Sea of Copiers" src="description image" style="">
    <div>
    <a class="hlink1" href="">Multifunctional Printers/Copiers</a>
    </div>
    <br>
    <div>
    <a class="hlink1" href="">Facsimile</a>
    </div>
    <br>
    <div>
    <a class="hlink1" href="">Printers</a>
    </div>
    <br>
    <div>
    <a class="hlink1" href="">Large Format Printers</a>
    </div>
    <br>
    <div>
    <a class="hlink1" href="">Scanners</a>
    </div>
    </div>
    </div>
    </div>
    </div>
    CSS:
    Code:
    #pageContent{
        width: 749px;
        border: 1px solid #000000;
        border-right: 0px;
        -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
        -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
        box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
        background-image: url("torn paper image");
        background-repeat: no-repeat;
        background-position: bottom center;
        margin: 0 auto;
        padding-bottom: 6px;
    }

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

    You can't make a background image stretch outside the border of the element. Either remove the bottom border or add another element underneath just to hold the torn image.

    On another matter don't use breaks wjust to make space as that is wasteful and unnecessary. Just add a bottom margin to the div instead.

    e.g. Don't do this:
    Code:
    <div> <a class="hlink1" href="">Facsimile</a> </div>
     <br>
    It looks as those sequence of elements should be list element anyway.

  3. #3
    SitePoint Enthusiast Angrypoonani's Avatar
    Join Date
    Mar 2011
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't make a background image stretch outside the border of the element. Either remove the bottom border or add another element underneath just to hold the torn image.
    Thank you for your help, I was able to accomplish what I needed to do with your suggestion. But I found it was better to just use an image instead of a background and then position it (it was more work for me but oh well). It's cumbersome that I can't link an image through css though...

    On another matter don't use breaks wjust to make space as that is wasteful and unnecessary. Just add a bottom margin to the div instead.

    e.g. Don't do this:
    Code:
    <div> <a class="hlink1" href="">Facsimile</a> </div>
     <br>
    It looks as those sequence of elements should be list element anyway.
    What about spacing within a div element itself? Would I then use the <br /> tags to create my desired spacing or should I wrap my individual content that I want separated in <p></p> tags?

    Example:
    Code:
    <h1 style="">Physical Address:</h1>
    <div style="">123 Fake Street<br />
    Fake City, FS 11111<br />
    <br />
    (111) 111-1111</div>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Angrypoonani View Post
    What about spacing within a div element itself? Would I then use the <br /> tags to create my desired spacing or should I wrap my individual content that I want separated in <p></p> tags?

    Example:
    Code:
    <h1 style="">Physical Address:</h1>
    <div style="">123 Fake Street<br />
    Fake City, FS 11111<br />
    <br />
    (111) 111-1111</div>

    It's all about using the appropriate element for the job in hand. A break is to create a line-break between words such as you would have in a poem or an address or between form controls.

    Breaks are not meant for making space between paragraphs because that's what the p element is for and you can adjust the margin to suit Neither are they used for making space between other block elements.

    You can use breaks for lines in an address though but again the address should probably be in an address element if it is the contact details for the site and not some arbitrary address.

    In most sites there will actually be very few breaks needed at all.


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
  •