Link to home
Create AccountLog in
Avatar of hamidovt
hamidovt

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....
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

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

Avatar of hamidovt
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!!!
Erm - could you perhaps tone down the agression. Just trying to help.
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.
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?
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.
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

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
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Ok, thanks.
I think this is good enough to say it is not possible.
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...


Dorian: That would not change the image. The solution was to hide the image and set the background image of the container
dorianm:
As mplungjan already said that will not work because image from src would remain in foreground