Getting an image inside of a CSS created background transparency to NOT be transparent

I created a div with a partially transparent background color. That is working great. But, inside that div I placed an image and that image is also partially transparent, which I do not want. I want the image to be 100% opaque. I have tried and failed with a variety of styles.
Here is the CSS that makes the background color partially transparent.
#home-text {
    width: 873px;
    margin-right: auto;
    margin-left: auto;
    color: #000;
    background-color: #E4CC92;
    /* for IE */
filter:alpha(opacity=70);
    /* CSS3 standard */
opacity:0.7;
    margin-top: 725px;
    padding-top: 10px;
    padding-left: 35px;
    padding-right: 10px;
    padding-bottom: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 12px;
    border: 2px solid #421206;
Thank you for any help.

I'm afraid opacity effects everything inside the container.
As a workaround, apply a semi-transparent PNG background-image to your container. This will give the 'see through' effect without degrading opacity on text & images.
See example:
http://alt-web.com/Sample.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

How to use sdk to get the image in the pdf file created by illustrator?

I have some pdf files create by illustrator and saved as pdf documents,
now I want to use the sdk to get the image in pdf files.
how to?
Thanks.

Thank you first!
Yes,you are right,since I am new to illustrator,and I want to try to write a plugin,
I have read the sdk doc and API and opened the sample in vs2010,but no idea about how to operate the pdf doc in illustrator with api.
Hope more advise or any examples,thank a lot.

After recharging iPod getting no image on screen just a dark blue light, does not respond to any input. Worked fine this AM now nothing!

ipod touch not responding, just a dark blue screen after recharging. Pushing on/off and other buttons have no effect. Worked find this AM and up until now...now; literally NOTHING!

Have you tried restoring?
iTunes: Backing up, updating, and restoring your iPhone, iPad, or iPod touch software
If necessary > Apple - Support - Service Answer Center

How do I center an image inside a CSS div tag using dreamweaver?

I know this may seem like a very silly queston to ask because it should seem so simple but how do I do that? I am having trouble being able to center an image inside of a div tag. Here is the code I have come up with so far. Thanks in advance for your help.
</style>
</head>
<body>
<div id="PageContainer">
<div id="PageHeader"> img.centered{display:block; margin-left:auto; margin-right:auto; }<img src="Untitled-5.jpg" alt="rowland" class="centered" /></div>
<div id="PageMenu">Content for id "PageHeader" Goes Here</div>
<div id="PageBody">Content for id "PageHeader" Goes Here</div>
<div id="PageFooter">Content for id "PageHeader" Goes Here</div>
</body>
</html>
Also you can ignore the other div tags after the first div id. The first div id that has my image link is the one I am trying to get to center my image. The image is in there just not centering.

Centering Pages, Images and other elements with CSS:
http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html
Nancy O.

I am trying to create a button in flash that will display 4 separate images at the same time when clicked. I can't get the images to stay on when I take the mouse of the button. I need the actions script code to make this happen.

I am trying to create a button in flash that will allow the user to click on the button and 4 separate images show up at the same time. I can get the images to appear when I click the button but they will not stay on the screen. I need to know what code I use to make the images stay once the button is clicked, then I need to know exactly where I place that code. It does not appear to be possible to add the action code to the buttons layer since each time I add a new layer I just get another "up" "over" "down" and "hit" line.
Thank you in advance
AP

It is not clear how you are trying to realize this from your description. If you are trying to create this within a button symbol it will not work. Explain your approach and if there is code involved, show what you have so far.

How do i get a placed image to appear as image inside a layer?

There is a long winded reason why I want this, but in essence I am trying to replicate another artwork that has been supplied to me.
When I place a Photoshop image (TIFF / PSD etc) how can I get it so that it simply appears as <image> inside the relevant layer (screen shot attached)
I am finding that when I place an image I do not get this

That's what I had assumed. It just doesn't seem to be working for me. You don't think there is a Preference setting that might disable it?

If I add artwork by dragging a jpg to the artwork area after selecting several rows, in some instances a single icon is created in the flipper; in others one is created for each song. Why? How can I get one image per album every time?

If I add artwork by dragging a jpg to the artwork area after selecting several rows, in some instances a single icon is created in the flipper; in others one is created for each song. Why? How can I get one image per album every time?

If I add artwork by dragging a jpg to the artwork area after selecting several rows, in some instances a single icon is created in the flipper; in others one is created for each song. Why? How can I get one image per album every time?

How do I create a duplicate image inside the same page? Then how do I change the color of that image

how do I create a duplicate image inside the same page? Then how do I change the color of that image from black to red?

Hello there!
Here is one way to create a duplicate image and colorize it. As you can see below, I have one image right now, that I want to duplicate.
My layers panel looks like below.
To duplicate your image, click the downward arrow on the right side of your Layer Panel.
Select Duplicate Layer. This will duplicate the layer that the image is on.
Select "OK" to approve the duplication.
As you can now see in the Layers panel, the image is duplicated. The new layer is now at the top of the Layer panel.
Now to colorize your image, go to Window > Adjustments.
The Adjustments panel will now be opened. Select the Hue and Saturation icon as seen circled in red.
The Hue and Saturation propertied panel will be opened. I selected "Colorize", and adjusted the hue and saturation bar to achieve the level red in my photo.
As you can see below, the image is now red.
Now i want to make sure only ONE of my image layers is red. I moved the Hue and Saturation layer to only be on top of the bottom layer. The image on the top layer now will not be affected by the red.
Select the move tool, so I can now move the image layers so we can see both of them.
With each image layer selected, you can take the move tool and move the images. I moved mine on top of eachother and you can see my red layer (bottom) and the non red layer (top).
I hope that helps. i have also included helpful links.
Please post back with any questions,
Janelle

I am trying to create a polygon shape and place an image inside of it.

I am trying to create a polygon shape and place an image inside of it similar to this: http://media-cache-ak0.pinimg.com/originals/1f/47/51/1f4751aeb7c30099e4caf61393990fca.jpg
How do I go about doing it? Thanks!

Hi
You would need to design the image outside of Muse using any image editor like photoshop , where apply polygon frame on top of the image and area outside shape should match the color of the image of page, then insert the image on Muse page, it would be same effect. Currently we cannot create any shape in Muse , but you can try some customization using custom code.
Thanks,
Sanjit

Is it possible (and does not cause any problems) to create a disk image inside a disk image?

Hey there,
I'd like to setup a password protected Disk Image with several different password proteced disk images inside. Such as different levels of security. is that possible at all and if yes, is there anything to consider or any known issues?

sorry my englisch is not that good. I don't understand your sentence. what does it no to both queries mean?

Image URL in the CSS issue

ALL,
I have a problem in URL of images in CSS. in the CSS, URL for the images. so we have checked-in the content server. we have given the url path in the css. URL would would look */idc/groups/public/documents/cp_images/imagename.gif*. offcource I have checked-in the CSS in the content server. images from content server appering in the site studio designer preview as well as the browser.
But when I have published the this site in to specific location, i am facing problem. I am not getting in any ERRORS/warnings while Site crawling & Site publishing. All images paths in the CSS changing including images in the index.htm pages. But problem is images used in css are not appering on pages. other than that css effect like Color/effects are comming on htm pages. Images are also avaible in the published folder.
My question is is there specific way to specify the images paths in the CSS in the oracle site studio designer?
Any help would be much apriciated...
Regards & thanks,
Nirmala Vijaya Sekhar Varre

I cant say for sure is there any standard way to avoid this behavior but here are some technique's which can be suitable to solve your problem.
- you can place all your site images into constant relative path to yours CSS. So if your css file is included in page like
<link href="groups/public/documents/web_asset/file.css" type="text/css" rel="stylesheet" />then you can place images into groups/public/documents/web_images/ and refer to them in CSS like that
div {
background:url(../web_images/file.gif);
}- next try you can move all CSS definitions requiring urls into page template leaving main pack in CSS set like that
<link href="groups/public/documents/web_asset/file.css" type="text/css" rel="stylesheet" />
<style type="text/css">
div {
background:url(groups/public/documents/web_images/file.gif);
</style>or make a fragment to hold this dynamic css definition and include it in header in standard way
- next try (for a curvy ones, havent tried myself, but seems working) you can create a idoc script with css commands, but include some commands to make it work like css
i mean this very commands setContentType (page-720), setExpires (page-722), setHttpHeader (page-724) (pages are from idoc reference guide)
i'd recommend using 1st method to avoid complexivity.
Edited by: ivanko on Nov 30, 2009 3:20 PM

Image inside of PDF file?

I am creating a .bmp file in Photoshop and inserting it into a word document. I then save that image as a .pdf. When viewing pdf and hovering your cursor over the image inside the .pdf, the name of the image file appears(like a text tool tip). Is there a way to prevent this from happening?
Thanks

PDF Optimizer - Perhaps not available in Standard.
Look for it under the 'Advanced' menu drop-down.
When Acrobat supported file formats are brought into PDF with Acrobat (PDFMaker) many have configuration options associated with their "Convert to PDF".
A supported graphics file format, by itself or if in an authoring file (FM, DOC, etc.) will be 'touched' by these.
Open Acrobat's Preferences. Select the Category "Convert To PDF". Scroll down the center pane's listing of file formats. Locate and select PNG. Click the 'Edit' button. Some configuration options for compression and color management are provided. You could play with these.
HOWEVER -
The Word to PDF process would have to be via PDFMaker (Convert... from the Acrobat Bar) and *not* via Save As PDF-XPS. The MS Office routine does not provide the functionality described above for Acrobat. The Office process is completely separate from anything "Adobe" or "Acrobat".
Also, something described often by Bill@VT -- Word, particular 2007, 2010 seems to do some 'odd' things to graphics in a Word file that is going to anything other than a piece of paper.
Some folks seem to get satisfactory behavior by use of EPS.
Also, it may be worth playing with a JPEG of the logo.
About the PDF.
From what you describe it seems that you have a web link, in the PDF, to the stand alone PNG. This would permit separate download of the PNG.
I suspect that Acrobat Standard 9.x does not provide the tool set available in Pro or Pro Extended. So, you'd not be able to edit/delete the web link (or link) in the PDF.
Perhaps, back in Word you have a 'Hyperlink' present that can be edited/removed?
Also, in Word, try an "import" - browse to file - select - make it an integral part of the Word file. Then produce the PDF.
Fundamentally, the PDF reflects the content mastered in the Word file. The Office Save As PDF-XPS or the Adobe PDFMaker merely process this out with whatever configuration option settings each provides.
Be well...

Image inside e-mail ??

Hi,
This is the code i found in e-mail, which is used to display an image inside the mail.
<IMG src="cid:024b01c1d494$76fe2520$[email protected]">
How can i create this image in memory and insert this image in HTML page.
Thank you !

OK.. I think I understand the issue. Let me just restate in my words to make sure:
You want to be able to render the contents of an HTML formatted MIME message where the message contains an "embedded" image.
Assuming this is your objective, I have a solution.
If you are using a web browser to render the email, the one and only way a browser can render an image is with a valid URL path. As you correctly point out, the src of the image is not a valid url path. Thus, the only solution is to change the HTML.
This approach can be confirmed if you simply send an email with an embedded image to Hotmail or Gmail. Using Outlook, you can "insert" an image which results in the embedded image situation in your example. If this is sent to a Gmail account (for example) and you view the source of the message at Gmail you will notice that the src attribute has been changed by Gmail.
So... You need to parse the html and replace the src attribute of any image where the src is currently referencing another "part" of the message.
Now... The actual image is most likely NOT in memory. This is deliberate because it may be a 10GB image which would kill your server. So, what do you replace the src attribute with?
In the solution I implemented, I created a servlet (actually a struts action) which was supplied with the content ID (cid) if the image to be rendered. This servlet then looks into the same MIME message, finds the associated part, gets the part's input stream and pipes it straight out to the HTTP response.
For example:
Where you had <img src="cid:1234..."/> I replace with <img src="render.do?cid=12345..."/>
The render.do is my struts action (servlet).
This is the only way I know how to render embedded images in emails via a browser. If anyone else has any bright ideas?

IOS7 differently displaying images with % "height" in CSS

Hello there...
Prior to iOS7, iBooks were displying the books we are doing one way - the way we wanted-, and with iOS7 it has changed.
Particularly: before, we were setting the "height" of a <div> containing an image as a % on CSS like this:
.contenedor_foto_autor {
height:100%;
width:auto;
page-break-before:always;
page-break-inside: avoid;
text-align:center;
font-size:0.9em;
.foto-autor {
height:70%;
width:auto;
And the xhtml being:
<div class="contenedor_foto_autor">
       <div class="foto_autor">
           <img src="imagenes/Robert_Louis_Stevenson_1885.jpg" alt="Retrato"/>
       </div>
       <p><span class="letra_mayor">R</span>OBERT <span class="letra_mayor">L</span>OUIS <span class="letra_mayor">S</span>TEVENSON</p
          </div>
The result of this was a picture filling the 70% of the iPad/iPhone screen height, and the text under it, as we expected.
Now, this same code results on the picture filling ALL the page and the <p> on the next page.
Any ideas, sugestions, help to understand what is happening and how to solve this -how to have the "height" set ???
Thank you!!

Hi pablonolla, I am having the same similar problem, I just finished creating an Ebook today and updated to iOS7 and the new iBooks for iOS7 and now all my spacing is messed up, I did mine using primarily <p>s and <span>s, (including many many images) along with some line breaking with a clear all tag to "assure" the content would start on a new page, now I am going to have go through my entire Ebook which took me weeks to complete, and respace the whole thing. My theory is that by removing the book view with the center and outer margins, they increased the overall width of the page view which inadvertantly affects the height. Not sure how to go about this without respacing the whole thing...and what if they do this again in iOS 8???
Message was edited by: RoushMan427

How can i postition an image inside a div correctly?

I am learning CSS and I want to insert an image inside a div
used as a footer. I want the image to appear to the left of the div
with say 10px left margin and 5px top and bottom.
I also have a horizontal UL and a <p> inside the div
which are set to the centre. I want to keep their appearance as
they are - but add the image to the left without putting anything
else out of place if that makes sense.
Can someone show me how it is done?
http://www.tomkilbourn.com/newsite/test/footer.html
The image which I want to use is from validator.wc3.org -
<p>
<a href="
http://validator.w3.org/check?uri=referer"><img
src="
http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88"
/></a>
</p>

~Billy~ wrote:
> Ive got it to work by adding -
>
> <span
style="position:absolute;top:27px;left:20px;">
> <img src="/newsite/images/valid-xhtml10.png"
/></span>
>
> before the closing body tag, but is there a way to do it
without using
> absolute positioning and span?
>
Id' do it by adding position relative to my footer div and
then I'd
create a class for the img and use absolute positioning for
it which if
nested within the footer div will be relative to that - like
so.....
in your css...
#footer {
border-top: 1px solid rgb(187, 187, 187);
padding: 0px 0px 10px;
background-color: rgb(51, 0, 0);
position: relative;
.w3c {
position: absolute;
top: 10px;
right: 20px;
and your html markup for your footer dive, something like....
<div id="footer">
<img src="/newsite/images/valid-xhtml10.png" alt="alt text
here"
class="w3c" />
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li class="last"><a href="#">Item
five</a></li>
</ul>
<p id="footerbottom">Copyright Tom Kilbourn 2007
www.tomkilbourn.com</p>
</div>
chin chin
Sinclair

Getting an image inside of a CSS created background transparency to NOT be transparent

Similar Messages

Maybe you are looking for