Let me guess, your images aren’t showing?
This is because when you uploaded your images to your server, the path referenced in the background-image:URL(infographic_600_05.png); is now incorrect.
What you need to do is change this path to look like this(assuming your css file is directly in your “specific-theme” folder):
background-image:url(YOUR-IMAGE-FORLDER-NAME/infographic_600_05.png);
Let me know if that works 🙂
Alternatively you could use image maps. Not sure of your level of HTML skills but you could use these. The concept of it is to map out invisible clickable points onto one singular image(instead of chopping it up)
http://www.image-maps.com/
Thread Starter
Joe18
(@joe18)
Thanks!!!!!!….I was on the right track! I did have my path correct actually. Because I didn’t totally understand the relationship of some of the code…. I had removed a part of it…
background-image:url and the ( )
I still don’t understand why when the images are .png and have no background. Unlsess it’s just an output setting from slicing. Explain please. If it’s something I should know at this point in my life I will look it up on my own. LOL
So I put that part of the code I removed all back in and its working now. I just need to play with the CSS.
Glad you got it to work!
The background-image or background property is really the only way to reference an image in CSS. Think of your png as the background to that particular div.
So for instance, each div is referencing a piece of your sliced up image. Each div has the height and width and with css you are now applying it’s background-image.
When you see images on a website like a slideshow, we don’t use css to reference the image. Instead we use HTML to reference it by using the <img> tag. Here are some links you can take a look at for a better explanation.
Background-Image CSS
http://www.w3schools.com/cssref/pr_background-image.asp
Img Tag HTML
http://www.w3schools.com/tags/tag_img.asp
Thread Starter
Joe18
(@joe18)
(Sorry in advance if this thread went through twice. I’m putting it in again because it looks like on my end it didn’t go through. Luckily I still had my wording saved in a doc.)
Thanks…it’s making sense. I will check out the sites you gave me above.
Almost there!
My only issue right now is
• my image is falling partially behind the footer or rather the footer is overlapping on the image
• I can’t seem to get the image centered and in a perfect world would like it to work on all browsers and devices.
This is the output code from slicing that was at the top of the page of code after slicing.
<body bgcolor=”#FFFFFF” leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>
<div style=”position:absolute; left:25%; top:0px; width:600px; height:334px;”>
Now into the wordpress page.
I had removed the above code from the top of the page. Didn’t feel like I needed the bgcolor etc. and figured the position information could be moved to CSS.
So I then started with the below code…I’m on the wordpress page….remember the image is showing up but half behind the footer.
[span12]
<div class=”info graphic”>
the next bit of code is all image code information. Only giving one since its just repeated basically….
<div style=”background-image:url(/wp-content/themes/theme22336/foldername/infographic_600_03.png); position:absolute; left:205px; top:0px; width:176px; height:146px;” title=””>
</div>
[/span]
Then in style.css
I put…
.infographic {
display:block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
I did have display: absolute….. I’ve been using trial and error. I’m just giving you my last attempt and I keep changing it. So Im still fighting with it.
Thank you for your time.
Ok so i’m going to show you the correct way of doing this. First and foremost, you can NEVER count on auto generated code from Photoshop, Dreamweaver, or for that matter, any CMS auto generated code. It adds extra code that is completely unnecessary.
For this example we are going to assume we have a folder of images on the server and we need to piece them together to make one whole image. We are also going to assume that we want to work within the WordPress text editor found on every page editor.
Step 1
We need to create a wrapper div that is equivalent to the width of the entire image that we are piecing together. Lets assume that it is 960px wide. The height doesn’t matter for this.
<style>
#wrapper{width:960px;}
</style>
<div id="wrapper">
</div>
Step 2
Now we need to add in the individual divs one by one that will hold each individual image to create a whole.
<style>
#wrapper{width:960px;}
#image1{
background-image:url('image1.png');
float:left;
width:"width of image"
height:"height of image"
}
</style>
<div id="wrapper">
<div id="image1"></div>
<!------Duplicate image1 div for all other images--------->
<!-------Keep image divs within wrapper div-------------->
</div>
As long as the images equal the total width when put in a row, you can do this for all other images. Once you’ve reached the max width, start another row of images until you complete the total image. Let me know how you make out.
FYI, put the css in your css file. Not in the wordpress editor
Thread Starter
Joe18
(@joe18)
Ok…I’ve been working it. I did a lot of trial and error before coming back. I think I fell into the grand canyon on a part of the instructions.
Feeling like a failure. (My folder is on the server holding the images. We will call it foldername…) I understand what you are saying that I can not trust the auto generated code coming from other applications. Just having a hard time figuring out what to take away and what to add.
I understand the concept of once images add up to 600 pixels in width I then go to the next line. Not sure how to set it up though. Can we pretend that the first two images add up to 600pixels in width combined and the following two as well combined 600 pixels in width and show me how to set this up along with the CSS. (not understanding the image1.<div id=”image1″> I understand div’s I just don’t understand how you want me to set this up and if I’m suppose to rename everything )
So on my page for example…
<div id=”wrapper”>
<div style=”background-image:url(/wp-content/themes/theme22336/foldername/infographic_600_03.png); position:absolute; left:205px; top:0px; width:219px; height:146px;” title=””>
</div>
<div style=”background-image:url(/wp-content/themes/theme22236/foldername/infographic_600_04.png); position:absolute; left:213px; top:0px; width:381px; height:60px;” title=””>
</div>
<div style=”background-image:url(/wp-content/themes/theme22236/foldername/infographic_600_05.png); position:absolute; left:508px; top:0px; width:176px; height:60px;” title=””>
</div>
<div style=”background-image:url(/wp-content/themes/theme22236/foldername/infographic_600_06.png); position:absolute; left:208px; top:0px; width:424px; height:60px;” title=””>
</div>
</div>
I don’t know what I should be removing or changing after wrapper.
On the CSS doc. this is what I have now. (I removed all my trial & error code I had.)
#wrapper {
width: 600px;
}
No worries, we’re going to get through this I promise! When I wrote image1 that was just a random ID name I gave it. In the css that I wrote you will see I referenced it with a #. You need to get rid of the absolute, top, and left properties. You only need to apply the styles that I have in my example. Those include float:left, width, height, and background properties. The wrapper is the container for your images. If you want to move the image around as a whole you do it with the wrapper. As for the others, the float properties will do the positioning for you.
