[czuprynski]

hello. as a test i created a quick banner using google web design to have on the front cover rather then a still image. the issue I’m having is when i insert the object tag into the cover image holder everything on the cover (heading and sub headings etc) get pushed down the page to sit under the animated banner. have i missed something? I’m puzzled.
heres what the code looks like:

<!-- COVER IMAGE -->
<div class="cover">

<!-- cover-image-holder -->
<div class="cover-object-holder">
<object width="1090" height="770" data="welcome/index.html" ></object>

</div>
<!-- cover-image-holder -->

<!-- title -->
<h1>BLAH</h1>
<!-- title -->

<!-- slogan -->
<h2>BLAH</h2>
<!-- slogan -->

<!-- extra titles -->
<h3><span>we are</span> FAMILY OWNED</h3>
<!-- extra titles --

<!-- open link -->
<a href="#/resume" class="rm-button-open ribbon">
<span class="ribbon-stitches-top"></span>
<strong class="ribbon-content">OPEN</strong>
<span class="ribbon-stitches-bottom"></span>
</a>
<!-- open link -->

</div>
<!-- COVER IMAGE -->

could you also please tell me how to make the content of the object tag responsive as it does not scale at all. I’ve tried some things but nothing is working…

thanking you loads in advance

[czuprynski]

hi. don’t want to be a pain but really need ur help on this one…

[ahmetsali]

Hi, try this custom css code;

.cover-object-holder {
    position: absolute; top: 0; left: 0;
}

if that doesn’t work, please provide your url.

[czuprynski]

hello. i don’t know what I’m doing wrong. please help

auspollhaulage.com.au

[ahmetsali]

Hi again, are you sure you have added the custom css code i posted. Because i can’t see the code when i check your source code.

[czuprynski]

I’ve added the code to the css main file…

[ahmetsali]

i just checked your css file and you have a redundant “dot” in your code, remove it and it should be fine;

/* COVER PAGE */
.   ****remove this line
.cover-object-holder {position: absolute; top: 0; left: 0;}
.cover { position: relative; z-index:1000; width:100%; height:100%; padding-right: 1px; overflow:hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; }

[czuprynski]

ok thats done. but it didn’t seem to fix the issue. while the page is loading i can see all the headings on the front cover page with grey background then when page is loaded i can see the animation but all headings disappear. there also seems to be an issues with the image on the inside cover.

[ahmetsali]

update your custom css code as;

.cover-object-holder { position: absolute; top: 0; left: 0 ;z-index: -1; opacity: 0.6; }

also for your portfolio page, <div class="portfolio-items should be inside of <div class="content">

[czuprynski]

ok i corrected the first item and now the cover is displaying correctly!!! however on the object is not scaling on different devices. how can i make it responsive to resize and centre itself to the cover object holder?

also I’m not sure what you mean in regards to the portfolio page? I must be missing something here.

i know i have ongoing questions but i do appreciate ur time and help very very much.

[ahmetsali]

1-) it looks like your source image doesn’t have similar dimensions/aspect ratio as the cover page. your image is 700×515 px and it should be similar to cover page dimensions: 560x740px.

2-) about your portfolio page markup, move

<div class="portfolio-items

into

<div class="content">

it should look like;

<div class="content">
    <div class="portfolio-items">
    ...
    </div>
</div>

[czuprynski]

sorry for being painful but I’m staring at the code and its not comprehending. because i have all the code for the sub-heading etc on that page won’t moving the “portfolio-items” code up push all of that information down the page?

I’m working on resizing the aspect ratio now for the cover so fingers crossed that will do the trick :)

[czuprynski]

i have adjusted the animation to 560×740 but its still not responding correctly within the cover-object-holder. especially when viewed on smaller devices (u only see the top of the animation which fills the screen).
i feel so deflated!!! i just want the thing to centre itself (i don’t mind cropping of the animation top, bottom and sides when viewed on small screens) PLEASE HELP
also when viewed on an oversized screen the width works nicely but i get a grey band underneath the animation. is this a ration thing? how can i solve that?

[ahmetsali]

maybe this helps you;

– you can try placing the object related to bottom right;

.cover-object-holder { position: absolute; bottom: 0; right: 0 ;z-index: -1; opacity: 0.6; }

[czuprynski]

that code works when viewed on iPhone. when viewed on desktop i get a grey band at the top of the page. when viewed on iPad in portrait i get the grey band at the top and down the left side.

[ahmetsali]

It can be possible but it requires more hard work, we can only provide customizations of some lines of code. You can hire someone experienced to do the job for you, if you are not familiar to wordpress-html coding.

[czuprynski]

ok i have scrapped the animation on the front cover. going back to basics and using an image. I’ve applied the original code including the adjustment code you gave me on the 21st.
the size seems to be working and all heading display correctly. the issue now is the image has a ghosting effect. it seems to duplicate itself. what is the issue and how do i fix this?

[czuprynski]

can u please help! image has a ghosting effect. it seems to duplicate itself. what is the issue and how do i fix this?
this is the last of it so i won’t be bugging u after this is sorted lol

[czuprynski]

can u please help! image has a ghosting effect. it seems to duplicate itself. what is the issue and how do i fix this?
this is the last of it so i won\’t be bugging u after this is sorted lol

[ahmetsali]

Hi again, try adding this custom css;

.cover-image-holder {
    display: none;
}

[czuprynski]

Thank you!! It looks great now. shame about the animation but i think the cover image makes more of an impact. Thanks for all ur support :)