- This topic is empty.
-
AuthorPosts
-
June 12, 2014 at 10:44 am #172618drotarParticipant
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.htmland 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;}
June 12, 2014 at 10:58 am #172620Paulie_DMemberIt’s not quite clear what you are after….do you still want the border and border-radius etc?
June 12, 2014 at 11:03 am #172621drotarParticipantthanks 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
June 12, 2014 at 11:21 am #172623Paulie_DMemberi 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
.bottomLeft1
div 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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.