A transparent backround between the image and the text?

Hi there!

I’m a print graphic designer (mainly InDesign/Photoshop user) knowing nothing about the web design. I tried Wordpress (hopeless), then Wix (super easy, but it has it’s limitations), and now Webflow (want to learn it). For several hours I’ve been trying to get the Wix image attached done in Webflow – with no success.

What is the order to get that transparency backround on the image, and the text on that transparent backround? Flex can’t be used ON image, etc. I’ve tried different methods with no success.

These are the features I try to get in the site:

  1. A table image propably 1140 px or something (normal width of the site).
  2. Bluish colour continues on the left and on the right side of the image endlessly.
  3. That dark transparent backround on the left side of the image (behind the text).
  4. Text on the transparent backround.

If somebody would tell me what to choose and what is the order in: section, container, column, DIV block, flexbox, text, etc.

Great thank’s for Your help!

Johnny



Here is my site Read-Only: LINK
(how to share your site Read-Only link)

There are many ways to achieve the section you’re showing. To start with, the image could be a background image of a div, or an actual image inside of the div. If you can produce the image at the exact dimensions of the section, you can chose both. For conveniency let’s chose background-image.

You section will be built like this:

http://vincent.polenordstudio.fr/snap/q9mk7.jpg

On the orange div, you’ll define a background color with transparency, to achieve your effect.

1 Like

Basically, in HTML+CSS, you declare (add) a series of element, and you add properties to those elements to decide wether they should be displayed one after another, one close to another, or some on top of others.

You achieve this by using CSS display, position (relative for a flow of elements, and absolute for placing the elements where you want, even one on top of another), or Flexbox, or a mix of all. When you’re using position:absolute, you will be using CSS z-index to define the order of virtual layers from front to back.

So you have to organize your contents into logical groups. You’ll use DIVs for that. Never hesitate to nest divs, to have many many levels of divs. You’ll use the outer ones for the general layout and the iner one to organise the subcontent. For example:

http://vincent.polenordstudio.fr/snap/q0ea2.jpg

All the orange box are divs. For the inner ones, the top one can be labeled ‘cta section’, then ‘text content’, then ‘references’, then ‘colors’… etc.

Thank You, Vincent!
You gave me a profound answer.

Have to go those through step by step…
(I guess the issue here is just my ‘newbieness’ :wink: )

Johnny


…by the way, what is that other alternative to make the backround image? (With the bigger/original resolution). I might change the layout while doing/designing the site, so I rather use the original image (at this point).

Johnny

Shit!
I know these are really newbie issues, but when I try to put something ON the image, everything goes side by side (not ON to something).
WHAT you told me (the target) was clear, the problem is HOW to get there… :cold_sweat:

Basically I would need a short step-by-step (= button-by-button) advice for my orienteering.

Johnny

HI @JohnnyL

Have you had a look at these short tutorials, they hopefully explain the concepts Vincent is referring to:

Thank’s, StuM, have to look at those ones!

I looked at almost all the Webflow videos - but basically in one evening. So I naturally don’t remember much from the details :wink:
But if I remember right, many of the advices beginned from the situation where the text (and the area beneath it) was already ON the image. There wasn’t much of an button-by-button explonation how to bring all that stuff ON the image (not just moving around on the image).

But of course it’s there somewhere, so have to look again :wink:
…plus those tips of Yours.

Johnny

I quickly looked at the videos and they all seems to start from the same spot: text and (and sometimes it’s backround) are already over the image.

I also searched for the topic in Google (‘Webflow text over image’), and was surprised how many newbies have been batling with the same issue over the last few years.

So a tip which would propably low the threshold to start useing Webflow.

  1. Video about ‘how to BRING / PUT the text (and it’s backround) OVER the image’ (not starting from the point where they are already there). From a side-by-side situation to a on-top-of-each-other_situation with the elements when bringing them to Webflow. If there are many ways, show as many as possible (from the very beginning).

A video which would show what’s happening BEFORE those three videos You just showed me :wink:

Not giving up – still trying to find a solution to this newbie obstacle…
(I quess in these type of issues the one who doesn’t know, knows the best – the problem, I mean :wink: ).

Johnny