How do I make my background transparent?

Status
Not open for further replies.
Tookie

Tookie

Member
Feb 24, 2012
36
1
So this is how the site looks like for now: -- But I want the change that white background so it can be see through but you can still see as if it's a ghost. I believe it's called transparent, I Googled it and the defeneitondefinition sounded like what I wanted.
f3f5275a7c9d4b92a4c57bd.png


White Container CSS:
Code: 
}
.container {
    width: 560px;
    margin: auto;
    border: thin solid #CCC;
    background-color: #FFF;
    padding: 8px;
    margin-bottom: 15px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
}

Index:
Code: 
}
<html>
<head>
<title>MyDOMAIN! ~ BLAH BLAH BLAH, HELP ME DEVBEST!</title>
<link rel="stylesheet" href="splash.css" type="text/css" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
</head>
<body>
<center><img src="images/logo.png"></center>
<div class='container'>
<a href="#"><img src="images/hotel.png" border="1px"></a>
<a href="#"><img src="images/forums.png" border="1px"></a>
<a href="#"><img src="images/hotel.png" border="1px"></a>
</div>
</body>
</html>
}
 
Sort by date Sort by votes
Tookie

Tookie

Member
Feb 24, 2012
36
1
It makes the full white background into my BG. I don't want that though.
9atvz
14b111fcb0fc4d4c9c930e8.png


I want something like this:
You see how the card is baby blue but you can still see the background so the bg isn't solid. Something like that.
df-card.jpg
 
Upvote 0 Downvote
Sean

Sean

‫‫‫‫‫‫  ‫  Don't Worry, Be Happy
Dec 12, 2011
1,121
405
You need to do it in your Image Editing software. if its just part of the image you want transparent.

Or if the Image is css then create a div box and make that background transparent
 
Upvote 0 Downvote
Heaplink

Heaplink

Developer & Designer
Nov 9, 2011
510
173
You can use background-color: rgba(255, 255, 255, 0.6).
the rgba(RRR,GGG,BBB,AAA); is for Red Green Blue Alpha and can be applied to any color property in CSS. I usually use this over opacity, because opacity has this stupid flaw where it wants its childs to be it's opacity as the parent.

I only use opacity because rgba is not useful on images and such. So if you need your images to be transparent, use the opacity property.

If you need a blur effect like the image you posted, it is not possible without making an actual background image with this effect, sorry.
 
Upvote 0 Downvote
Sean

Sean

‫‫‫‫‫‫  ‫  Don't Worry, Be Happy
Dec 12, 2011
1,121
405
I assume your looking for something like this >
You must be registered for see links


js51c.png
 
Upvote 0 Downvote
Markshall

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,637
2,389
HTML: 
.container {
    width: 560px;
    margin: auto;
    border: thin solid #CCC;
    background-color: #FFF;
    padding: 8px;
    margin-bottom: 15px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    -khtml-opacity:.6;
    -moz-opacity:.6;
    -ms-filter:”alpha(opacity=60)”;
    filter:alpha(opacity=50);
    opacity: 0.6;
}
 
Upvote 0 Downvote
brsy

brsy

nah mang
May 12, 2011
1,530
272
Mark's code should work (Mark =
You must be registered for see links
). The whole trick is the opacity, which is a fancy word for transparency.
 
Upvote 0 Downvote
Status
Not open for further replies.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
🌙  Switch to Dark Theme

Latest posts

Top