asked on

Is it possible to set up an image source with CSS only?

I need to set image by changing styles file only.

HTML looks like this:

<img border="0" id="MSOImageWebPart_WebPartWPQ5" src="/_layouts/images/homepage.gif" alt="Microsoft Windows SharePoint Services Logo" />

Unfortunately background-image: url(myImage.jpg); does not help, since it is remaining on the background. Something like this would be perfect solution for me

#MSOImageWebPart_WebPartWPQ5
{
src:url(myImage.jpg);
}

But unfortunately "src:" is not valid for CSS....

Michel Plungjan

why not

#MSOImageWebPart_WebPartWPQ5
{
   background-image:url(myImage.jpg);
}
 
 
<div id="MSOImageWebPart_WebPartWPQ5" /><img src="transparent_spacer.gif" alt="Microsoft Windows SharePoint Services Logo" /></div>

Open in new window

hamidovt

ASKER

Are you actually reading my question????

I asked if it is possible to do that with changing styles file only, given the HTML below!!!

There a honreds of ways of doing that if I am gonna change HTML. If you dont know the subject do not comment on it!!!

Michel Plungjan

Erm - could you perhaps tone down the agression. Just trying to help.

hamidovt

ASKER

I am not aggressive, I am just angry that you dont read the question properly although I have described it quite good. And because of you comment people who might really help will see multiple comments in the listing and think that someone knowing what he is doing helping me.

Michel Plungjan

1. It was not clear to me that changing the HTML was out of the question, only that with an actual image, the background was not visible.
2. What gives you the right to be angry with a voluntary help and to make me wish I had not tried to help you?

hamidovt

ASKER

1. I stated it clearly and even wrote down that using background-image is not the option

2. You are right, I am sorry for that.
A couple of time I have experienced situations when some made a couple of very stupid comments and the questions have been dumped because of that. I got too emmotional, sorry for that.

Michel Plungjan

Apology accepted.
The reason I suggested background image ANYWAY was because I was wondering if you had tried a transparent image in the html and a background image on the container. Obviously to me now, you can only change the style file.
Does the image have a container???

Then you can try this - I have .01 and 10 as opacity to show what I am doing, change to 0 to make it transparent

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
 
<style type="text/css">
#MSOImageWebPart_WebPartWPQ5 {
  filter:alpha(opacity=10);
  opacity:.01;
}
#someContainer {  
background-repeat:no-repeat; 
background-image: url(http://www.cee.lsu.edu/research/Gallery/FrontPicture.jpg); 
}
 
</style>
</head>
 
<body>
<div id="someContainer">
<img border="0" id="MSOImageWebPart_WebPartWPQ5" src="http://sharepoint.microsoft.com/_layouts/images/homepage.gif" alt="Microsoft Windows SharePoint Services Logo" />
</div>
 
</body>
</html>

Open in new window

hamidovt

ASKER

Well, in the meantime I did something similar to what you adviced, but in little bit easier way(hiding image and putting background to the container). However that is not exactly what I want or I would rather say I dont like this solution... But I can live with it if someone confirms that it is not possible to set up an image source with CSS only. Can you do that?

HTML comes from SharePoint and do not want change it and trying to do evrything with CSS. You will see HTML and added styles below.

<div WebPartID="da7da645-1ade-4243-9ca2-88cdef0ee986" HasPers="false" id="WebPartWPQ5" width="100%" class="ms-WPBody" allowDelete="false" style="" >
   <table cellpadding="0" cellspacing="0" border="0" style="width:100%;">
     <tr>
       <td align="Center" valign="Middle" style="background-color:transparent"><img border="0" id="MSOImageWebPart_WebPartWPQ5" src="/_layouts/images/homepage.gif" alt="Microsoft Windows SharePoint Services Logo" /></td>
     </tr>
   </table>
</div>
 
#MSOImageWebPart_WebPartWPQ5
{
  visibility:hidden;
}
#WebPartWPQ5
{
  background-image: url(myImage.jpg);
  background-position:left top;
  background-repeat:no-repeat;
}

Open in new window

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hamidovt

ASKER

Ok, thanks.
I think this is good enough to say it is not possible.

dorianm

mplungian posted the right solution.

The CSS part :
"
#MSOImageWebPart_WebPartWPQ5
{
background-image:url(myImage.jpg);
}
"
will go in your styles.css file, which you will change. For example, in the file styles2.css, you will have instead :

#MSOImageWebPart_WebPartWPQ5
{
background-image:url(myImage2.jpg);
}

And your question is answered...

Michel Plungjan

Dorian: That would not change the image. The solution was to hide the image and set the background image of the container

hamidovt

ASKER

dorianm:
As mplungjan already said that will not work because image from src would remain in foreground