Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS adding a see through png at the bottom of a div

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #172618
    drotar
    Participant

    hey,
    what i am trying to do is have this polynesian graphic at the bottom of a div tag not have the white from the div tag behind it so that it is see through. the site i am working on is
    http://blueheavenisland.com/about.html

    and the box in question is “How to get Lost” you can see the graphic at the bottom of the div and what i would like is to have a clear background behind it .

    Any idea on how i could accomplish this? Any insight would be greatly appreciated. thank you in advance.

    WHAT I AM USING NOW TAG inside

    <

    div>

    <!–POLYNESIAN GRAPHIC BELOW TYPE–>

    css right now is

    /TEXT ABOUT/
    .left1 {
    width: 100%;
    float: left;
    background-color: rgba(255,255,255,.7);/WHITE BOX UNDER SIDE BUTTONS/
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px; /* future proofing /
    -khtml-border-radius: 15px; /
    for old Konqueror browsers */
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 30px;
    margin-left: 10px;

    }
    

    .bottomLeft1 {
    float: right;
    width: 100%;
    height: 50px;
    /background-color: black;/
    background-image: url(../img/tattoo.png);
    background-repeat: repeat-x;

    }
    
    #172620
    Paulie_D
    Member

    It’s not quite clear what you are after….do you still want the border and border-radius etc?

    #172621
    drotar
    Participant

    thanks P, i do. but it should cut off right above where the graphic starts. i was thinking if it were possible i would use a border with negative margins and pure transparency but i know this is impossible.

    your suggestions please if you have any.

    d

    #172623
    Paulie_D
    Member

    i meant do you want the border / border radius on the png…but lets deal with the positioning first.

    You have a few ways to do this.

    The first is just to move the .bottomLeft1div out of .left div completely and make it next in the source order.

    Then it’s just a matter of adjusting the floats/margins/padding to tweak it into position.

    Second, we could leave it where it is but position it absolutely (after adding position:relative to the parent div.

    Then again tweak the dimensions etc to nudge it into place.

    However…..it’s arguable whether the div should even be in the HTML at all….it’s there for styling so it should be in the CSS.

    That brings me to the CSS-Tricks way.

    Take the div out of the HTML markup altogether and use an :after pseudo-element on the .left div This could then be positioned much like option 2 and you have cleaner markup and all your styling where it should be.

    Once it’s in place…we tweak positioning / margins etc to make sure there’s room for it

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.