Link to home
Create AccountLog in
Avatar of jgluckman
jgluckmanFlag for United States of America

asked on

WordPress - Multiple text (and other) objects over large image on page

I am using WordPress 3.4.2, and pretty much a newbie with CSS. I'm trying to do the following:
I want to have a static home page with a large graphic that pretty much fills the page. That much I can do.
I then want to place text blocks over the image in precise locations. I want to do this via WordPress as when I did all of the text in the graphics file, it didn't render as well as it does via WP.
There are a few other elements - some buttons and some javascript code that calls a form that I also want to position over the image.
In addition, there are some regions on the image itself that I want to map to link to other pages - I know how to do that, but it all has to work with the above.

I can get the image to place correctly, but I haven't been able to place the other objects on top.

My style.css file contains:
#content{ 
  height: 700px;
  width: 920px;
}  

div#MainImage{
  position: absolute;
  height: 680px;
  width: 920px;
  top: 0px;
  right: 0px;
}
.bottomTextLeftHL{
    position: absolute;
    width: 135px;
    font-family: arial;
    font-weight: bold;
    font-size: 14px;
    color: red;
    line-height: 100%;
    top: 580px;
    left: 30px;
}

Open in new window


And my page HTML contains
<div id="MainImage"><a href="image-url"><img class="alignnone size-full wp-image-111" title="image-title" src="image-url" alt="alt-text" width="920" height="680" /></a>

<span class="bottomTextLeftHL">Learn More </span>
</div>

Open in new window


I have a class defined for each object I want to place over the image, and they're all contained within the MainImage div.  

I've tried relative placement, but it seems to be relative to the object before it, not to the image, and absolute placement (which makes more sense) is tied to the entire window, not the image div.

I'd think that this should be straightforward, but I just haven't been able to get the combination correct.
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of jgluckman

ASKER

I thought I had tried a version of that, but I must not have.  It looks like this will work for the positioning.  

One more question: How do I map the areas of the background image where I want links? Is that done through the CSS as well, instead of an HTML image map?

Thanks!!
I would absolutely position A tags. You will want to set them to display as block elements and give them width and height. They should have text in them which is great for search engines and screen readers, and then 'hide' it using a negative text-indent.

<div id="MainImage">
<span class="bottomTextLeftHL">Learn More </span>
<a id="someLink" href="somepage.html">This is a link</a>
</div>

#MainImage { background: url('someImage.jpg) no-repeat left top; width: 920px; height: 680px; position:relative; }
#someLink { position:absolute; top: 100px; left: 100px; display:block; width: 50px; height: 50px; text-indent:-9999em; }

Open in new window

Super responsive!  Just for fun, I checked my request, and the answer was there.  Gave a good follow answer too.  Thanks for the help!