Wed, 2010-08-25 15:48
I am currently making a site where there is a page with 6 stickypads as an image background.
This image is inside a container and I want to place the site logo in the top-left stickypad.
Whenever I change the window size however the position of the logo changes and it moves off the stickypad.
Code is below:
CSS
#faq_cont{position:relative;left:50%;margin-left:-720px;width:1454px;background-image:url('images/pads_bright.jpg');background-repeat:no-repeat;background-position:center;background-attachment:fixed;}
.sticky_logobox{position:absolute;top:160px;left:230px;}
HTML
A diagram of the page is shown below:
Any help would be much appreciated!
Thanks!
Wed, 2010-08-25 15:50
#1
HTML Code: <div
HTML Code:
<div id="faq_cont"> <div class="sticky_logobox"> <img alt="" src="images/logo.png" width="233" height="129"/> </div> </div>
Wed, 2010-08-25 15:56
#2
get rid of
get rid of background-attachment:fixed and see if that helps
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Wed, 2010-08-25 16:00
#3
That works great! But... If
That works great!
But...
If possible I would like to allow the background container to always appear in the center of the window as before. i.e. The window resizes and the stickypads are in the center.
Rather than having the left border area and then the pads to the right and then the screen cutting off.
Wed, 2010-08-25 16:21
#4
try using margin: 0 auto; on
try using margin: 0 auto; on the parent container to center it.
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS