Translucent background image

User 188640 Photo


Registered User
862 posts

This is something I haven't tried before. I'm building a 'simple' website for someone who now wants a special logo and a background image behind the content (Which he's dragging his feet on the content.). Did I mention he wants a 'simple un-cluttered website'.

I'm trying to use Inger's Translucent BG Image file to see if that will work. I can't get the image to start full screen at the mobile end, it's just collapsed in from each side. I would like it to be responsive. Is this possible?

Please say no. :lol:

I think I can work out the folder structure but I don't want to do all that work and find out I'm spinning my wheels.

Any link for a tutorial would be great. I can't find one.

Thanks for any help.
A Rose is Just a Weed in a Corn Patch!
User 2699991 Photo


Registered User
3,752 posts
Online Now

Ernie Hodge wrote:
This is something I haven't tried before. I'm building a 'simple' website for someone who now wants a special logo and a background image behind the content (Which he's dragging his feet on the content.). Did I mention he wants a 'simple un-cluttered website'.

I'm trying to use Inger's Translucent BG Image file to see if that will work. I can't get the image to start full screen at the mobile end, it's just collapsed in from each side. I would like it to be responsive. Is this possible?

Please say no. :lol:

I think I can work out the folder structure but I don't want to do all that work and find out I'm spinning my wheels.

Any link for a tutorial would be great. I can't find one.

Thanks for any help.


Hi Ernie
set the container holding the background image to
width = 100%, max width = 100% from smallest right up to largest breakpoints

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2699991 Photo


Registered User
3,752 posts
Online Now

You can also get a similar effect by placing a gradient overlay on the same container (make both gradients same semi-transparent colour)

I can do a video, but it's 3:00am here so everyone is asleep except me, it would have to be a silent movie, or wait until a more reasonable hour later today.

unless of course someone else comes up with something before that

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 188640 Photo


Registered User
862 posts

Wayan,
I'll give both of those a try and let you know.

Thanks for you reply.
A Rose is Just a Weed in a Corn Patch!
User 122279 Photo


Senior Advisor
13,774 posts
Online Now

Ernie, on which of my sites did you find the file you are mentioning? I haven't checked my 'sharing' site recently, but if you try my mock-up.coffeecup.com, go to one of the frameworks (If I'm not mistaken, you're using Foundation, aren't you?) and download the second file here: https://mock-up.coffeecup.com/f-comps/f … cency.html

Sorry, I have been busy, didn't see this until a couple of minutes ago.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 188640 Photo


Registered User
862 posts

Inger, Yes I use Foundation. I'll try that and see if it does what I need it to do. Thank you and hope you are doing well.
A Rose is Just a Weed in a Corn Patch!
User 2699991 Photo


Registered User
3,752 posts
Online Now

Ernie Hodge wrote:
Inger, Yes I use Foundation. I'll try that and see if it does what I need it to do. Thank you and hope you are doing well.


If all else fails Ernie I have made a very simple way of doing something similar, which only needs 1 container holding a background image (semi-transparent, or gradient overlay), a logo image, a header H! and a paragraph, no relative or absolute positioning etc.

Demo "How To" available with sound if needed

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 188640 Photo


Registered User
862 posts

Wayan,
That would be great. Do I need to send you an email? I downloaded the file Inger mentioned but haven't tried that yet. Going to do that now supper time is over.
A Rose is Just a Weed in a Corn Patch!
User 122279 Photo


Senior Advisor
13,774 posts
Online Now

Ernie, I seem to have answered a question you did not ask :o I probably was not awake enough when I read it. Anyway, in my components, both the one on the sharing and the mock-up sites have been built the same way. I use 'cover' for the image size. In combination with pixel dimensions for the resulting image, it will keep its aspect ratio, but the VISIBLE part of that will not necessarily have the same aspect ratio. In addition, I have positioned the image 'center top'. So that leads to the disappearing of image contents left and right when the viewport gets smaller. If you have a pixel height, that height will be kept at all viewports.

In your case, with that client, it depends on what the logo looks like, and where it is going to be positioned, and the size of it. If it is going to lie under just a corner of the text (that will be covering more real estate), you can use the size 'contain', then it will be responsive, and there is nothing to worry about. If it is larger or if it will be under the whole text, you need to make it 'cover', but you can position it 'left top', or 'right top' etc. It will depend on which part of it needs to be visible.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 188640 Photo


Registered User
862 posts

Inger, What he wants is the image as the background for the entire page with the content on the image. I would be very transparent like a ghost image. Maybe I didn't explain that clear enough. I'm still going to try what you suggested and see what Wayan has also.
A Rose is Just a Weed in a Corn Patch!

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.