Hi,
Site: Organic Shadows @ http://www.os42.com
I have some images in my menu and would like to put them in place using css rather than within my index.php
I need to be able to do this so that for different styles different images can be shown, whereas under my present method, the same image is locked into every style.
I know it is possible but I am not sure how it is done.
Could anyone point me in the right direction as to how to make this happen?
Your help would be much appreciated. Thanks :)
Inserting an image using css (14 posts)
-
shadow
Posted 7 years ago # -
MarkMichon
Posted 7 years ago ##div {
background-image: url(whatever);
} -
Posted 7 years ago #Thanks for the suggestion Mark, but I am not sure I understand it.
I need to place 5 separate images in my menu but on top of that I am trying to place 5 'different' images in each style.
I hope this makes sense.
It's driving me crazy. There must be a way to do this. -
Posted 7 years ago #Take a look at my site(click name) and down at the very bottom I have the validated buttons and such. Those are done all in CSS, is that kinda what you mean?
-
Posted 7 years ago #Well not really Mark.
On my site I have 5 images which are similar in style to my header. At the moment they are placed within my index.php
This all works fine but I am trying to make some other styles.
The problem is that these images do not match those needed in my new styles, so I would like to use css to allow for these 5 different images.
Thanks for your help :) -
Posted 7 years ago #Thanks Mark,
I can see that what you mean is right. Unfortunately, something is not working though.
I have this in my index.php
- <div>
<div id="image1"></div>
</div>
and then in my css I have this...
#image1{
background: url(block1.jpg) no-repeat center;
}
block1.jpg is located in the same directory as my css file
So, from what I see, it should work...and yet the reality is - it doesn't...
Am I making any obvious errors here?
Thanks again :) - <div>
-
Shadow - it working, but the Div tag is empty, so it may simply not be big enough. In the CSS try setting the height and width to the size you want it to be. The image should then show.
Tg -
Posted 7 years ago #Tried that - still no go. I think it is in the css. The li is showing up because it is direct from the index
It's getting the css to work with it that is causing me hassles...
Thanks for your suggestions - I will keep persevering. -
Mark (podz)
Posted 7 years ago #Shadow - this works.... but it's ugly :)
I took the image code from the Crayon experiment:
#image1 {
background-image: url('http://www.mfr.f2s.com/1css/wp-content/menu3.gif');
border-top: solid 4px #cc9900;
border-left: solid 4px #cc99ff;
border-right: solid 4px #cc9900;
border-bottom: solid 4px #cc99ff;
}
Because there are borders specified, only they appear if I just used
<div id="image1"></div>
If I put some nonbreakspaces in though, the image will turn up:
<div id="image1">
</div>
Not pretty at all, but at least once you can see the image, you can start adding any padding ?
I guess the much better way to do this is through positioning, but I'm still learning that :) -
Posted 7 years ago #Thanks TechGnome and Podz,
Tried each of those suggestions. No difference on suggestion from TG but the suggestion from Podz did show the image.
Unfortunately it also showed 'nbsp' over the top of the image for every line where it was placed.
I am at a bit of a loss as to where to head now. I was really hoping to make some new styles but do not want to take the images out on my default because I really like them as they are.
I could try and use the same set of images in every style but it defeats the purpose of what I am trying to accomplish.
Anyway, thanks for all your help and suggestions. If I ever get it worked out I will let you know how it is done :) -
Posted 7 years ago #Hi Podz :)
It's sitting there now and showing the code over the image.
Sorry - I just arrived home after a braindraining day - do you mean leave the 'amp' out? tried that too but it just left written over the image.
Thanks for all your input - it's always very appreciated :) -
Posted 7 years ago #Odd....... you on msn ?
-
NuclearMoose
Posted 7 years ago #Should be &
-
Posted 7 years ago #Yet again, The Master - Podz - comes through and makes it all seem so simple.
What would we do without this guy...
You are a star PODZ...Thanks :)
Topic Closed
This topic has been closed to new replies.
