# \[Pro\] Backdraft & Adding Graphic Item

**URL:** <https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440>\
**Category:** Freeway\
**Created:** [July 14, 2015, 8:24pm UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440 "2015-07-14T20:24:34Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hal](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/h/ee7513/32.png) [@Hal](https://discourse.softpress.com/u/Hal)\
**Post date:** [July 14, 2015, 8:24pm UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/1 "2015-07-14T20:24:34Z")

</div>

I just started using Backdraft and love it so far. I develop simple websites so I think it’s going to be quite valuable to me.

I created my first page and want to add additional design elements to it (e.g., flower.png). I cannot figure out how to do it. I basically want to lay it beneath some of the modules that contain text and images. For example, I want to place something on top of the 3 and 2-wrapper modules you’ll see on the linked-to page.

Thanks in advance!

Hal

laurieandlawrenceadopt . com

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![ThomasKimmich](https://discourse.softpress.com/user_avatar/discourse.softpress.com/thomaskimmich/32/2753_2.png) [@ThomasKimmich](https://discourse.softpress.com/u/ThomasKimmich)\
**Post date:** [July 15, 2015, 1:33pm UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/2 "2015-07-15T13:33:53Z")

</div>

Hm - let me say it that way:

####Backdraft

Backdraft is to be seen as framework. It’ll mean, that you can grab from the available modules with different columns - but only from those. If nothing fits into your world, you’ll need to rewrite your outline (your change your design attitude)

####Templates

They’re “As Is”. You’ll need to write your outline exactly to the template, changing words, images and colors. If your outline doesn’t fit - either seek for another template or change your outline, cause you wear another designers worn shoes!!

####So something wrong with Freeway?

Nope. Freeway is just a pro tool, which allows you building your own stuff. That’s what the app has been created for. Doing so it requires some additional knowledge. It has the tools for doing everything - you just need to know where they are and how to handle those. Being aware of those tools, you won’t need neither backdraft nor a template.

####The Precise Answer to your request

In the above mentioned surroundings, items are place relative. An “in between”, “above” or “below” item will be positioned absolute. So what you basically need to know is, that an absolute positioned item is to be treated as a child item and obeys its parent. The parent can be everything, from the top-level surrounding DIV (called PageDiv), down to every single DIV in hierarchy.

So if you want to dip your toes deeper in this rather cold water, I recommend to seek for “Inflow Design” or even “BoxModel” which teaches you how to position items relative (or how Backdraft basically has been built and why). Then you slightly can start to combine this with you already known method of “Drop and Drag”. Once there, you realize that you can drag those items beyond a DIV in the sidebar. Finally it’s a question of positioning within the parent which can be done by negative values - and so on and so on.

But more than often, the trick is simply changing your attitude asking yourself:

“Do I really need it??” Think about it - even twice.

Cheers

Thomas

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![Hal](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/h/ee7513/32.png) [@Hal](https://discourse.softpress.com/u/Hal)\
**Post date:** [July 15, 2015, 1:42pm UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/3 "2015-07-15T13:42:05Z")

</div>

Thanks for the advice Thomas. Something to ponder. 🙂

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [July 15, 2015, 6:16pm UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/4 "2015-07-15T18:16:41Z")

</div>

> I cannot figure out how to do it.

Essentially what you need to do is choose the Module that is closest to what you want to achieve. Copy it from the Available Section.

Insert your cursor (so it is flashing) between the existing modules that you are using and paste it in.

You then may have to adjust the content of your new module to suit your design plan.

So when you say

> I want to place something on top of the 3 and 2-wrapper modules you’ll see on the linked-to page.

I assume that you actually mean ‘before’ the 3 and 2-wrapper modules.

David

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[https://freewaytalk.softpress.com/person/options](https://freewaytalk.softpress.com/person/options)

---

<div class="post-metadata">

**Author:** ![Hal](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/h/ee7513/32.png) [@Hal](https://discourse.softpress.com/u/Hal)\
**Post date:** [July 15, 2015, 6:51pm UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/5 "2015-07-15T18:51:04Z")

</div>

Thanks David. I mean “overlay” and not above/below or before/after another module, but I understand your point about leveraging the modules as much as I can for what they are. That’s the point of templates. Fair enough.

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [July 15, 2015, 6:54pm UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/6 "2015-07-15T18:54:49Z")

</div>

> I mean “overlay” and not above/below or before/after

The problem is that if you add something as an overlay it is then out-with the inline layout and will not be Responsive - the whole point of Backdraft is to give you a Responsive site.

David

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[https://freewaytalk.softpress.com/person/options](https://freewaytalk.softpress.com/person/options)

---

<div class="post-metadata">

**Author:** ![Hal](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/h/ee7513/32.png) [@Hal](https://discourse.softpress.com/u/Hal)\
**Post date:** [July 15, 2015, 6:57pm UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/7 "2015-07-15T18:57:30Z")

</div>

Right, but if I were more of an expert with Freeway I’m sure I could add images where I wanted and that would be responsive while still leveraging Backdraft modules.

But, I’m not. 🙂

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [July 15, 2015, 7:02pm UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/8 "2015-07-15T19:02:27Z")

</div>

Yes - but in the Framework of a Backdraft site you are limited to the existing modules and leveraging them to suit your needs.

Maybe a clearer description of what you are trying to achieve would help us to guide you.

A simple page with just the basics of what you want would be a good starting point.

D

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![Hal](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/h/ee7513/32.png) [@Hal](https://discourse.softpress.com/u/Hal)\
**Post date:** [July 15, 2015, 7:05pm UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/9 "2015-07-15T19:05:19Z")

</div>

Here’s the page: laurieandlawrenceadopt . com

What I’d like to do is not have to put images (the star-like graphics) on the yellow background image or in a straight line like you see below the heading and instead place them on every page wherever I want.

Does that help?

Thanks for taking the time to help me out!

Hal

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [July 15, 2015, 8:12pm UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/10 "2015-07-15T20:12:43Z")

</div>

> instead place them on every page wherever I want.

Then you need to click inside each wrapper item and insert html item. You could then set the background image of each to your graphic that you want to use.

Positioning can be achieved using margins, floats etc. but exact positioning over all sizes is going to take a bit of work.

Try it on a copy of this page.

D

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[https://freewaytalk.softpress.com/person/options](https://freewaytalk.softpress.com/person/options)

---

<div class="post-metadata">

**Author:** ![Hal](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/h/ee7513/32.png) [@Hal](https://discourse.softpress.com/u/Hal)\
**Post date:** [July 15, 2015, 8:19pm UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/11 "2015-07-15T20:19:36Z")

</div>

I’ve tried that, but the result is an image that isn’t responsive and isn’t transparent. I’m sure I’d doing it wrong. If you have the patience and time you can send me the specific steps. That would be awesome, but I know I’m asking a lot.

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [July 15, 2015, 8:25pm UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/12 "2015-07-15T20:25:42Z")

</div>

Needs to be a png with transparency, you need to set the container size to a % and background-size to cover (centre, centre no repeat)

D

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![Hal](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/h/ee7513/32.png) [@Hal](https://discourse.softpress.com/u/Hal)\
**Post date:** [July 15, 2015, 8:38pm UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/13 "2015-07-15T20:38:08Z")

</div>

It’s a png with transparency. The rest of what you said I don’t fully understand. This may be best suited to Skype. 🙂

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [July 15, 2015, 9:35pm UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/14 "2015-07-15T21:35:10Z")

</div>

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![Hal](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/h/ee7513/32.png) [@Hal](https://discourse.softpress.com/u/Hal)\
**Post date:** [July 16, 2015, 1:41am UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/15 "2015-07-16T01:41:57Z")

</div>

Thanks D. I have the background image OK. What I don’t know how to do exactly is …“click inside each wrapper item and insert html item. You could then set the background image of each to your graphic that you want to use.”

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [July 16, 2015, 6:27am UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/16 "2015-07-16T06:27:27Z")

</div>

> What I don’t know how to do exactly is …”click inside each wrapper item and insert html item.

This is a very basic level of FW use - have you followed any of the tutorials?

> **[Softpress » Support » Tutorials](https://www.softpress.com/help/tutorials/)**
>
> Watch video tutorials and walk-throughs for Freeway Pro & Freeway Express

D

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[https://freewaytalk.softpress.com/person/options](https://freewaytalk.softpress.com/person/options)

---

<div class="post-metadata">

**Author:** ![Hal](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/h/ee7513/32.png) [@Hal](https://discourse.softpress.com/u/Hal)\
**Post date:** [July 16, 2015, 4:23pm UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/17 "2015-07-16T16:23:17Z")

</div>

Yes I have. I’m probably not explaining myself clearly.

I uploaded a new page at laurieandlawrenceadopt. com/favorites.html.

I added a graphic box, imported a png as a pass-through, changed the width to fixed %, and looked at the break points to move the image where I want it.

So now I have a transparent image that scales and rests its location at the break points.

Is there a way to layer the item so the photos are in front (on top) of the image?

Hal

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:

> **[Information for existing FreewayTalk / Groups.io users](https://discourse.softpress.com/t/information-for-existing-freewaytalk-groups-io-users/24891)**
>
> The purpose of this topic is to provide information about the migration from FreewayTalk and Groups io to Discourse and the differences in Discourse, as well as a place to discuss the good or bad of the migration. For those previously subscribing...

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [July 16, 2015, 10:22pm UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/18 "2015-07-16T22:22:50Z")

</div>

> Is there a way to layer the item so the photos are in front (on top) of the image?

Certainly but you are missing the point about the use of BackDraft - it is designed to give you an easy inline construction (using relative positioning).

By adding that graphic element in that way your layout isn’t really inline anymore as the graphic you have added is an absolutely positioned child.

By selecting the graphic item and using Item\>Send to Back you may be able to move it ‘behind’ other items in that same wrapper. But it really isn’t the way to go.

D

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[https://freewaytalk.softpress.com/person/options](https://freewaytalk.softpress.com/person/options)

---

<div class="post-metadata">

**Author:** ![ThomasKimmich](https://discourse.softpress.com/user_avatar/discourse.softpress.com/thomaskimmich/32/2753_2.png) [@ThomasKimmich](https://discourse.softpress.com/u/ThomasKimmich)\
**Post date:** [July 17, 2015, 6:47am UTC](https://discourse.softpress.com/t/pro-backdraft-adding-graphic-item/22440/19 "2015-07-17T06:47:55Z")

</div>

> > Is there a way to layer the item so the photos are in front (on top) of the image?
> 
> Certainly but you are missing the point about the use of BackDraft - it is designed to give you an easy inline construction (using relative positioning).
> 
> By adding that graphic element in that way your layout isn’t really inline anymore as the graphic you have added is an absolutely positioned child.
> 
> By selecting the graphic item and using Item\>Send to Back you may be able to move it ‘behind’ other items in that same wrapper. But it really isn’t the way to go.
> 
> D

And this is what I already mentioned in my post above?

Cheers

Thomas

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[https://freewaytalk.softpress.com/person/options](https://freewaytalk.softpress.com/person/options)