We help IT Professionals succeed at work.

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

hamidovt
hamidovt asked
on
1,631 Views
Last Modified: 2012-05-05
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....
Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
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

Author

Commented:
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 PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

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

Author

Commented:
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 PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
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?

Author

Commented:
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 PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
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

Author

Commented:
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

IT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

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

Commented:
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 PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

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

Author

Commented:
dorianm:
As mplungjan already said that will not work because image from src would remain in foreground
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.