Your site's design is the 3rd part of your site's and business's "Personality" (if you do not remember the first 2 parts, see DAY 5). Ideas for customizing Solo Build It!'s Site Designer templates, including total customization to build your own unique Site Design.

Moderators: A J from Somewhere Hot, Laura from Chautauqua

#1376853 by Mark from Northern Taiwan
Sun Jul 16, 2017 11:20 am
I'm not really sure of the difference between page wrapper, body, background etc (despite reading the FAQ) so I'll try to explain what I'm trying to do.

I'd like my cover designer to use a cover image she's already created for one of my books, but minus the text, to sit behind my site. I may chose to only use the upper part as a banner, or I may keep it as the background/wrapper (the part on the sides and behind).

What size of image should I ask her to prepare for me? I want it to span the entire site. I'm using the Perfection template. This is for my site [Domain Private].

Thank you (and I hope you can understand what I'm trying to ask).
#1376856 by Juri from plainlight.com
Sun Jul 16, 2017 1:50 pm
Hi Mark,

The body takes the space of the entire browser window. In fullscreen mode, it will be equal to the screen resolution which obviously will change from visitor to visitor.

The image you see at the top now, takes the upper part of the body background. It is 2,591x184 px large. Your visitors see only the middle part of it which fits their devices; everything beyond remains hidden.

The page wrapper is the part where your content is placed. It's the one coloured blue in the image below:

pagewrapper.jpg
Page Wrapper vs. body
pagewrapper.jpg (81.71 KiB) Viewed 194 times

Its maximum width is set to 1,000px.

As for your question, it depends on how your cover image is composed and how you want it to display, i.e., which parts of it should be visible on what devices. The rule of thumb would probably be "the bigger, the better". Keep also in mind that the image will have a limited vertical dimension (height). So, unless you choose to repeat it vertically, it may end before your content does.

Kind regards,
J.
#1376859 by Mark from Northern Taiwan
Sun Jul 16, 2017 3:54 pm
Thank you! You've explained some things that weren't clear before.

But, can I ask you what you mean by 'how the image is composed'? It sounds like there may be a lot inside that short expression. Is there anything there I should explain to my cover designer?

And when you say 'and how you want it to display.' Does this mean bits will be cut off on certain devices?
#1376862 by Will from Los Ojos
Sun Jul 16, 2017 5:14 pm
Hi Mark,

When a page is built, it's as though the HTML structure of the page is laid out in a number of layers, one above the other.

The very bottom layer is the body, which as Juri says, covers the entire browser window (top to bottom, left to right). The immediate layer above that is the PageWrapper layer, which is blue in Juri's screen shot. On your site, that is specified to be 1000px wide and central. You've made it transparent, so I can see the lower body layer through your transparent upper PageWrapper layer. The PageWrapper is generally what you consider the "footprint" of your site.

Inside the PageWrapper container, is the HeaderWrapper container with all the Header structure. This layer sits above the PageWrapper layer. In your case it's also transparent, so the body layer is still visible through the PageWrapper and the Header elements as well.

You asked

What size of image should I ask her to prepare for me? I want it to span the entire site. I'm using the Perfection template. This is for my site [Domain Private].


Generally, full screen images on SBI templates (that go from far left to far right of a monitor) are capped at 1600px.

At this width, most monitors will see a full screen image, but most people won't see all of it. For example, if I use a Sony laptop, width 1366px, I won't see the extreme 117px on the outside left or right. (1600-1366 = 234/2 =117)


There is a whole sub-story about mapping device pixels to CSS pixels, but that's for another time.

And when you say 'and how you want it to display.' Does this mean bits will be cut off on certain devices?


Anything outside of the PageWrapper boundary is not shown on most portrait tablets and mobile phones. Given how the majority of viewers are now on mobile devices, most of them do not see the outside sections of a fixed background image. Your desktop viewers will see it, but how much they see depends on how you've set the image to display (cover or contain etc)

https://www.w3schools.com/cssref/css3_pr_background-size.asp

Here's what's visible of your image at the moment on an iPhone 5.

Image

Will
#1376886 by Mark from Northern Taiwan
Mon Jul 17, 2017 2:31 am
Will and Juri, thank you for taking the time to explain. To be honest, I'm surprised that so much is cut off on mobile devices (I don't have one myself). I thought that by using a responsive design I'd avoid that problem, but apparently not.
#1376924 by Will from Los Ojos
Mon Jul 17, 2017 3:31 pm
If you don't have a mobile phone, just make your widow smaller on the desktop using your mouse, down to mobile phone size. Then you'll see what it looks like on a phone.

This is what it looks like in a small Chrome window on my blue desktop.

Will

Image
#1376981 by Mark from Northern Taiwan
Tue Jul 18, 2017 1:14 am
Will from Los Ojos wrote:If you don't have a mobile phone, just make your widow smaller on the desktop using your mouse, down to mobile phone size. Then you'll see what it looks like on a phone.


Good idea. I think I've got it sorted out now :)
Similar Topics Statistics Last post
Image on top of page.
by Eddy from Ijzim Mon Feb 06, 2017 9:19 am
3 Replies
444 Views
by Jacki from Macleod
Mon Feb 06, 2017 8:08 pm
Fixed Image on Side of Pages
by Sean from Mehama Wed Jan 11, 2017 5:12 pm
5 Replies
581 Views
by Sean from Mehama
Sat Jan 14, 2017 1:36 am
Can't delete wrapper image
by Briar from Spanish Town Wed Aug 24, 2016 1:51 pm
2 Replies
237 Views
by Briar from Spanish Town
Wed Aug 24, 2016 3:09 pm
Making my own banner picture: What size?
by James from Pasadena Wed Apr 26, 2017 1:21 pm
10 Replies
453 Views
by James from Pasadena
Tue May 23, 2017 6:34 pm
image upload sizes - natural height and width
by Michael from Habit Genius Mon Nov 14, 2016 4:29 pm
2 Replies
431 Views
by Michael from Habit Genius
Mon Nov 14, 2016 5:40 pm

Users browsing this forum: No registered users and 4 guests