Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Positioning an Image on HTML

Posted on 2011-03-16
10
Medium Priority
?
379 Views
Last Modified: 2012-06-27
Hi,
I was wondering if there's a way to overlay an image on top of the entire webpage but make it relatively fixed to the webpage so it seems like it's a part of it.  I need to be able to scroll through the page and resize the window.  I am using a wordpress template, the image is the crucifix on http://theme.saintmaryplano.com.

Thanks
0
Comment
Question by:onBasics
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
10 Comments
 
LVL 2

Expert Comment

by:sihar86
ID: 35152647
we can make it using css.
there is good resources css site for me
http://www.w3schools.com/css/pr_background-position.asp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
  <style>
  body{
    background-image:url('imagefilename');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center top; 
  }
  </style>
  </head>
  
  <body>

  </body>
</html>

Open in new window

0
 

Author Comment

by:onBasics
ID: 35152718
Thanks for the quick reply but that's not what I meant.  I should have made my question clearer.  I want to make the crucifix on the website be in the background.  But since wordpress dynamically resizes the webpages I can not just put it in in a section.
0
 
LVL 6

Expert Comment

by:blueghozt
ID: 35155764
you are positioning the image using percentages hence it will move about - use a fixed pixel absolute positioning and put it inside something like your header which* must* have position:relative (the reason for putting the mark-up inside header is that this provides a fixed point to measure top and left from) - try deleting the existing div you have for the image and putting this inside your header div (doesn't matter where in the div as it's absolutely positioned) - I hasvae scraped your header mark-up and included the div with positioning I believe will work for you


<div id="header" style="position:relative">

 <div style="position: absolute; left:448px; top: 0; z-index: 1000;"><img src="http://theme.saintmaryplano.com/wp-content/uploads/2011/03/crucifix.png" height="840" /></div>

<!--LOGO GOES HERE-->

<div id="logo">

<a href="http://theme.saintmaryplano.com/"><img src="http://theme.saintmaryplano.com/wp-content/themes/wpchurch/images/logo-trans.png" alt="St. Mary" /></a>

</div><!--end LOGO-->

<div class="pagenav"><ul id="dropmenu" class="menu"><li id="menu-item-106" class="menu-item menu-item-type-custom menu-item-home menu-item-106"><a href="http://theme.saintmaryplano.com">Home</a></li> 
<li id="menu-item-102" class="menu-item menu-item-type-taxonomy menu-item-102"><a href="http://theme.saintmaryplano.com/category/parish/">Parish</a></li> 
<li id="menu-item-103" class="menu-item menu-item-type-taxonomy menu-item-103"><a href="http://theme.saintmaryplano.com/category/religious_ed/">Religious Education</a> 
<ul class="sub-menu"> 
	<li id="menu-item-526" class="menu-item menu-item-type-post_type menu-item-526"><a href="http://theme.saintmaryplano.com/125th-anniversary/">125th Anniversary</a></li> 
</ul> 
</li> 
<li id="menu-item-104" class="menu-item menu-item-type-taxonomy menu-item-104"><a href="http://theme.saintmaryplano.com/category/school/">School</a> 
<ul class="sub-menu"> 
	<li id="menu-item-507" class="menu-item menu-item-type-post_type menu-item-507"><a href="http://theme.saintmaryplano.com/online-payments/">Online Payments</a></li> 
	<li id="menu-item-549" class="menu-item menu-item-type-post_type menu-item-549"><a href="http://theme.saintmaryplano.com/test/">TEST</a></li> 
</ul> 
</li> 
<li id="menu-item-502" class="menu-item menu-item-type-taxonomy menu-item-502"><a href="http://theme.saintmaryplano.com/category/calendar2/">Calendar</a></li> 
<li id="menu-item-101" class="menu-item menu-item-type-taxonomy menu-item-101"><a href="http://theme.saintmaryplano.com/category/contact/">Contact</a></li> 
</ul></div>

</div><!--end header-->

Open in new window

0
Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

 

Author Comment

by:onBasics
ID: 35161021
Thanks blueghozt, I tried exactly what you said and it almost works. However, the crucifix is still moving when you resize the site.  I want it to keep in the same place relative to the content on the right and the left, can that be done?
0
 
LVL 6

Expert Comment

by:blueghozt
ID: 35161240
do you have a link to your test page? I suggested putting it inside the #header div as this will then act as the position from which the co-ordinates are measured so it will only move in sync with the header when the site is resized and always be in the same place, so to speak. Let me see existing code and I am sure I can find the solution, I was sure this would work out of the box for you.
0
 

Author Comment

by:onBasics
ID: 35184464
Yea the updated site is http://theme.saintmaryplano.com.  I have made the changes exactly as you said and its still not right.
0
 
LVL 6

Expert Comment

by:blueghozt
ID: 35194388
mmm in this example the <div> in question isn't actually within the header div mark up this is why it is still floating about - you need to put the mark up inside the header, say before the logo (doesn't matter where as long as it's inside the <div id="header"></div> then it will be fixed in place for you
0
 
LVL 6

Expert Comment

by:blueghozt
ID: 35194405
also in your link the crucifix div still has percentage positioning....
0
 

Author Comment

by:onBasics
ID: 35327844
Oh sorry, I did exactly that and it works! But now I have ran into another problem, is there anyway to make the links behind the actual picture clickable?  The image right now is on the top so it is not allowing us to click on the links behind it.
0
 
LVL 6

Accepted Solution

by:
blueghozt earned 2000 total points
ID: 35333179
I am glad you tried it out and that it works for you :)

with respect to your new issue, you won't be able to click through the transparency - you may have to use sliced images to create the effect you are after to avoid the bounding box of a single large image - maybe open another help request for that?
0

Featured Post

Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question