Jump to content
Sign in to follow this  
bluesquirrel

Tiled background but with different top left corner

Recommended Posts

bluesquirrel

Apologies for the messy title and for the following poor explaination. My inability to describe what I'm after is probably the main reason why I've been unable to execute it and why I'm unable to work out whether it's something I'm even able to achieve through the settings within Pagelines. The look I want to achieve is the grey background but then with a stripe across the top left - http://bayimg.com/OaPplaAdd ( I faked it in Fireworks) The grey background is a tiled image. I simply can't fathom what I need to do to have that 1 non repeating part of the image through tiling or repeating. I hope you appreciate/understand my logic issue, I've been working this through my head for days in order to try and find the right description so I can find the answer (I'm a bit behind in terms of webdesign too) - please tell me other people have been stuck in similar situations!

Share this post


Link to post
Share on other sites
catrina
You can tile the grey background, but as for that diagonal stripe, it needs to be implemented as a separate image and positioned so that it appears on the top left corner. If you save the diagonal stripe as a PNG with a transparent background, you can add it using this tag (in Headerscripts Code under Custom Code in the settings, for example): [code][/code] And then use CSS to reposition it in the corner using this CSS attribute in custom CSS added to Custom CSS > Custom Code: http://www.w3schools.com/Css/css_positioning.asp

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
bluesquirrel
Thank you so much Catrina, sometimes all it takes is a friendly nudge in the right direction! Now that I know the direction I should be heading in I'll get learning! Thanks again :)

Share this post


Link to post
Share on other sites
bluesquirrel
[b][RESOLVED! I worked through it myself and changed the z-index! I've probably created some horrible and messy code but I'm very proud of myself. Thank you Catrina for encouraging me to learn for myself!][/b] Well I've been at it for hours and I'm loathed to admit defeat! I added that transparent png to the Headscripts code and previewed the page to see where it would end up. [url="http://bayimg.com/AapdIaADE"]http://bayimg.com/AapdIaADE[/url] [the white box is a WP float plugin which sits in a widget in the footer] Once I saw that it was in the black space at the top of the page I set about using Firebug to try and work out where I needed to move it to. To me it looked as though I need to get it into the div for the "header", "outline" or "texture" class. Using that knowledge I then amended the code in the Headerscripts to variations (head, outline, texture) on this: [code][/code] but I wasn't getting anywhere so I decided to create a new ID called #stripes which I put into custom CSS: [code]#stripes { position: fixed; background-position:top left; background-repeat:no-repeat; background-attachement:fixed; };[/code] I've tried variations on that including the one there at present: [code]#stripes { position: fixed; top:0px; left:0px; };[/code] And in the Headerscripts Code I placed [code]
[/code] That got rid of the black stripe at the top of the page but also my stripes, however when I check out the page and the #stripes div in Firebug I do get blue a highlghted square where I expected the stripes to be.... so I'm fairly sure I'm on the right track! Now I'm at a point where the image flashes up and vanishes again. Have I done something wrong or am I being thwarted by a conflict with Pagelines or Pagelines overriding something I've done? I really didn't think I'd be back here asking, I solve most of my problems just by reading this forum and going away.

Share this post


Link to post
Share on other sites
bluesquirrel
Oh fudge - now I've broken it again. I only changed the z-index in Custom CSS from 2 to 3 to see if I could eliminate a problem that was causing the stripes to overlap the id="main" but not the id="header" on smaller sized screens/windows but it made the dreaded black strip reappear. When I changed the z-index back to 2 the black strip didn't go away! How can that be? [b]EDIT: Hmm it looks like my CustomCSS aren't loading, I can't seem to find them in Firebug.[/b]

Share this post


Link to post
Share on other sites
bluesquirrel
My custom CSS code is being dumped into my HTML and not as a style - it's sitting with the Headerscripts Code.... .....yet in Pagelines they're clearly in two separate boxes. How could this have happened?

Share this post


Link to post
Share on other sites
bluesquirrel
As this appears to be a separate issue I've started a new thread here: [url="http://www.pagelines.com/forum/discussion/20147/custom-css-being-dumped-in-html-file-with-headercode"]http://www.pagelines.com/forum/discussion/20147/custom-css-being-dumped-in-html-file-with-headercode[/url]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×