Translucent background image - Post...

User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Got the file, and tomorrow I'll have a good look at it (it's going on 01:30 here now). But I think Frank's suggestion would be the best, and easy to create.

BTW, If the page contents are to be limited to 1200px in width, I'd use a picture not wider than that. And also, I wouldn't use the % symbol in a file name.

Take care in the storms!
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 188640 Photo


Registered User
895 posts

Get some rest. Tomorrow's another day.

The percent thing was reflex and I didn't see that I had done that.

I just looked at Frank's file and if my client doesn't mind 'two' flags he wants that should work.

If I can figure out the container structure to go with an off canvas menu. I'll see what I can do with that tonight or in the morning.

Thanks everyone.
A Rose is Just a Weed in a Corn Patch!
User 379556 Photo


Registered User
1,533 posts

To make my project file easier to follow I've removed some of the settings which were changed back to default while I was experimenting. There are no other changes.

Frank
Attachments:
User 188640 Photo


Registered User
895 posts

Frank,

I was trying to figure out where the breakpoints went and after opening your second file I realized it was built with Frameless.

I've never looked at Frameless as I use Foundation. I hope I can adapt this to Foundation and make it work with the off canvas menu.

We have a nice line of storms coming off the latest tropical storm that may last all day so I can work on this and let all my outside work wait.


A Rose is Just a Weed in a Corn Patch!
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

I have taken Frank's project and recreated it in Foundation
https://www.dropbox.com/s/t6vh99lktfetj … t.rsd?dl=0
It doesn't use a 'background image', just a normal image on a background layer. The translucency is set on that bg layer.
The site menu works, I haven't changed anything knowingly, but it behaves a bit differently; instead of pushing the main contents to the side, it puts itself on top of the main contents. Must be the z-index.
You will see that I have popped in three instances of that flag. It is now responsive, and it is keeping its aspect ratio, therefore it will be much too small for the page on a phone if there is only one flag.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 188640 Photo


Registered User
895 posts

Thanks Inger I just downloaded it and will look at it today.
A Rose is Just a Weed in a Corn Patch!
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Ernie, If you download it again, you get the latest version where I have made the close button in the menu work. I didn't notice at first that it didn't work.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 188640 Photo


Registered User
895 posts

I'll go download it now but it's afternoon nap time :D, so after that I'll see what it looks like. Thanks.
A Rose is Just a Weed in a Corn Patch!
User 188640 Photo


Registered User
895 posts

OK, My client finally went and looked at where things were and decided the background didn't look very good. So now I'm going to set him down and let him know nicely that he's not a web designer.

Inger, your last file worked ok after I deleted 2 of the three BG pictures except I couldn't get a footer on the bottom. As it stands now let's let this idea rest. I may come back to it later for another use that it will work for.

Thank you Inger and Frank for the help.
A Rose is Just a Weed in a Corn Patch!
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Well Ernie, when you chat with the client, do let him know that 'the customer is NOT ALWAYS right'. If we could just ignore the aspect ratio of an image, it would not be a problem at all to have it spread out on any viewport, but the flag is a special symbol, for many even a sacred symbol, and you have to keep the proportions right.

Good luck to you!
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.