This will probably get lost in the wave of V5 excitement (and fair enough - I'm excited too.. It looks to be brilliant!)

I'd like to know if it's possible to insert an image that is not constrained by content padding.
For example: 3 column layout with 480px main column in the centre. Padding is set at 20px. I'd like an image to take up the full 480px (edge to edge - and the text to remain inset with padding).

Thanks, Peter.

Hi Peter,

Sure, if I am understanding you properly, this is the way divs (content, canvas, entry body, etc.) work by default. The background image is separate from the text. You can see that each element has a place to insert a background image within the FCS tray editor. You'll want to make sure that you have the right conceptual idea of which element you are effecting to aid the process of background image insertion.

If you are having trouble with this you can post back and we'll try to help. If this is not working the way it should you can submit a support ticket and I'm sure that someone will get along to it shortly.

hope this helps

Update: Just looking back at your post. Again, conceptual understanding is key. The total width of the content area is the total width that you set in the "Banner and Nav" tray editor. These are layers that we are working with, so if you want something to also include the "Content Padding Internal or External" area, then you will want to place the image below "Content", within the "Canvas".

Stephen, thanks for coming back to me so quickly.. I'm not sure I was entirely clear in what I was after (although I suspect the answer to my question may still lie in your answer)..

I have just put a couple of examples of what I'm after online at:

http://peteraitken.org/sq.html

I'd like every artists profile, and even journal entries to have images that sit the full width of the column. (In time I'd like these static images to be replaced by Slideshow Pro Slideshows but an image would be a great start for me.)

Any further information would be much appreciated... Thanks so much, Peter.

Ideally, when working in WYSIWYG (journal or basic HTML page) I'd select an image and apply a style to it (full width, no padding) just as you would text. (Eg Select text - Header 1, Header 2 etc.)

STEPS:
Embed an image - Click image - select IMAGE STYLE (full column width, No padding) and the image would sit in the right place.

Is this possible?

Thanks, Peter.

Peter,

Thanks for the picture, that really helps! That's not at all what you asked about in your post, but so be it...lol. This is a tough one to answer, I keep rewriting this response to make it easier for you to understand...I apologize if my answer seems overly complicated. Also, wanna give you points for a really original idea and maybe one of the most interesting questions that I've seen recently.

What you are asking to do is bypass padding for a specific element. We can sometimes force this by using negative margins for specific elements, but there is no easy way to do this within the WYSIWYG editor.

I think another problem with this approach is that you are sort of wanting to affect the design of your site from within the WYSIWYG. I think that's a cool idea because conceptually it is breaking down the barriers even more and further loosening the line between design and content, but not sure how you would approach this.

NOTE* It's possible that we could set up a negative margin class in the CSS and apply tags using the "raw html" editor mode.

Also, there are things to consider. Type has a look that people are accustomed to, be it on the web or in a book. You are asking to bypass the "gutter" and break the flow of typeface as you see fit. Sure, what you want to affect are images, but these images still fit within a typeface that people expect visual standards from. Not that I don't think it could be cool visually, I do. It's just that doing something like this will immediately make the pictures feel like part of the design, rather than part of the content.---and I think therein lies your biggest problem.

I don't really think this would be an easy thing for you tackle on your own, or as I've said, even immediately appropriate. If you are interested though, this is a subject that I'm willing to keep thinking on and further corresponding about.

thanks

Hi Peter! What Stephen said is really correct--- he is so awesome! But I just wanted to say I saw your site and its beautiful. I really like that artwork on your header.

Also, if it helps as a sidenote, I've "accidentally" created the effect you are looking for (due to my lack of proper structure knowledge)-- by having no margins at all (ie: content width 600 - margin left and right 0px) and then adjusting the padding left and right for text any image). It is not WYSIWYG friendly really as its essentially messing with the margins on everything (um... like ive managed to do). You can probly figure a workaround using CSS otherwise. Anyway it's a really nice site Peter - with the margins too!

*** Stephen ***
Your comments regarding visual standards are certainly well founded and the image really does become a part of the design rather than content. I hadn't thought too much about this but I absolutely agree. This is also a part of the reason for my desire to do so. To almost visually embed the artists work into our gallery website - and thus, our gallery.

I think I'm better off keeping a traditional visual standard within the journal to ensure an effective content flow. I would still like to explore this with all of the artists biographies.

*** Sib ***
Thanks so much for your kind comments. I change the header about monthly based on the upcoming/current exhibition but we have a lot of fantastic artists so it's always easy to make it look good.

Your "accidental" effect information is very useful. Thanks. It gave me another idea which was to remove margins, and then simply indent the type. A little bit fiddly but it works reasonably well. A very entertaining puzzle with plenty of answers I'm sure. I think I'll try and wrap my head around the CSS of all this.

I've done 3 other Squarespace sites for people but I've generally kept them reasonably close to the template layouts.

I'm off to play with V5 a little more and see what I can come up with.

Thanks again to you both.

Hi there Peter--- while working with my son on a new style in V5 templates I was thinking like the images could assume the entire space including padding if you figured something in CSS maybe about "overflow: show" for the respective columns you have; and were pixel accurate on the sizing width for the images too. Maybe could work?

Personally I would simply add style="margin-left: -20px;" in the image tag in the html editor. However if you want to do this purely in the WYSIWYG editor the best best to go about it, is what sib said; Click the appearance editor in the top right hand corner, click custom CSS and add the lines:

#content {padding: 0px; margin: 0px; }
p {margin-left: 20px; margin-right: 20px;}

This should give you 20px margin on the left and right of your text without needing to indent, whist leaving no margins for your images to go right to the edge. You can also apply this to any other type of text you use such as blockquotes. Hope this helps. It shouldn't be to difficult to apply, just a case of copy and pasting.

Hey thank you Sam!