Incorporating Design Elements…
Support Area › Forums › Moonrise › Incorporating Design Elements…
Tagged: Background image and logo
- This topic has 24 replies, 2 voices, and was last updated 8 years, 10 months ago by Bill Robbins.
-
AuthorPosts
-
June 17, 2015 at 00:41 #30733RecipeSocialParticipant
Hi Bill,
I’d like to incorporate as much if the design feature on the attached menu as possible into your theme.
I can see I can add images to the background sections on the home page.
I’d like to add the blue wavy lines to the background sections. However I only want the wavy lines on the edges, so they don’t clash with the exiting content.
I will ask the designer to provide the artwork, but I don’t know what dimensions to ask for. If you could help guide me through the process i’d be most grateful.
Ideally I guess I need to know the best dimensions for the whole image and the safe areas for the wavy lines within the image. If that make sense?
I’d also like to ask the designer to supply a separate logo featuring the wavy lines. Please can you also provide the maximum dimensions for the logo. Currently using 300 x 200 but without the wavy lines…
Thanks,
Christian.Attachments:
June 17, 2015 at 08:19 #30747Bill RobbinsModeratorHey Christian,
The content section of the home page is 960 pixels wide, so I would make a background image that has a space larger than that for your content. Most likely you’ll want a background image that can either repeat seamlessly or have one image for the top and one for the bottom. The sections get much taller as the screen size shrinks so having flexibility in height will be important.
For your logo, you might consider adding the wavy lines to the background of the header instead of the actual logo image file. That way they can be sized independently of one another based on screen size.
Take care,
BillJune 17, 2015 at 08:36 #30750RecipeSocialParticipantHey Bill,
Thanks for your quick reply 🙂
I’ll ask my designer to leave at least 1000 px in the middle of the artwork to allow for the existing content. Thanks for the dimensions.
I think I’ll have to use one continuous image, as there only appears to be one image upload option with this theme. Or am I missing something?
I like the idea of having more flexibility with of independently sizing the logo and the wavy lines, but how would I add the wavy line image to the header? There’s doesn’t appear to be an option to upload to the header section or am I missing something again?
Thanks,
Christian.June 17, 2015 at 08:40 #30751RecipeSocialParticipantI forgot to ask, what the maximum width for the home page image, baring in mind i’ll have a 1000px blank space in the middle and what height should the image be too.
I guess the height will be different if using one image, as to two separate images for top and bottom?
Thanks,
Christian.June 17, 2015 at 08:46 #30752Bill RobbinsModeratorYou can set background images to virtually any HTML element with a bit of CSS. You can add a background to the header and the home page sections that way even though there isn’t a built in control specifically for them.
For the height, you could get an idea of how tall you might need it to be by viewing the site on a mobile phone and then counting the number of screens tall the section is. You could then multiply that by the size of the browser on your phone to get an idea.
You don’t find this type of design as much now with responsive design because it’s trickier to pull off. If I was doing this, I would make a repeatable background or add the lines to the top and bottom, but not necessarily all the way in between. That way it can stretch and change width without looking like something’s off.
June 17, 2015 at 23:12 #30764RecipeSocialParticipantHi Bill,
Thanks for your reply.
I’m slightly clearer on what I need to do, but not completely. I understand a piece of CSS can be used to add an image to the header. However, what dimensions should I use? I’m guessing i’ll need to leave a whole in the header artwork to allow for the logo to show through. If the content section of the home page is 960px wide, what’s the total width? I’ll ask my designer to create some artwork for the header with a hole for the logo but I need to know the best width and height dimension to pass on to him.
I will ask my designer to make a repeatable piece of artwork, with wavy lines at just the top and bottom. But I need to know the best dimensions for this. Is there a set dimension I could use for this image which wouldn’t look like something’s off if viewed across various devices?
I don’t really follow your mobile screen measuring technique? Mobile screens are different sizes, surely there’s a more accurate way to measure?
Thanks,
Christian.June 18, 2015 at 07:07 #30770Bill RobbinsModeratorChristian,
Sorry for not being clearer. There are no hard and fast sizes because the site will be viewed on so many different sized devices. That’s why sites don’t typically do background like this anymore. Unless your pretty skilled with CSS, it’s difficult to apply in a way that works across screen sizes.
If we only had to deal with desktop sizes where everything was essentially the same, that would be one thing.
I would make the home page sections so they have a “hole” a bit larger than 960px wide. Make those repeatable and you should be fine.
For the header, I would probably make it around 2000 pixels wide. You could just have the logo on top of the lines without a “hole” there, but that’s up to you. On smaller screens the header will be taller than on larger ones. That’s something to think about as you have the sizes created.
Take care,
BillJune 22, 2015 at 05:22 #30838RecipeSocialParticipantHi Bill,
Thanks for getting back to me about this.
Okay so what I hear you saying is the safest and easiest way to add images that will hopefully work across multiple screens/devices is to get a design for the header 2000 px wide. And then add the logo separately as already done. I’m guessing there’s a little more flexibility if the logo and header image are individual. However what height should the header image be, is there a minimum or maximum? Or a safe bet?! I
I’m guessing the width for the main section needs to be 2000 px wide too, but with a 960-1000 pixels gap in the middle, right? I will ask my designer to add the wavy lines to the top and bottom of this piece of artwork, but what length do you recommend? Is there a minimum or maximum? Or a safe bet?! If I use the repeatable option, will the wavy lines then get featured all the way from the top to the bottom of the site?
Thanks,
Christian.June 22, 2015 at 08:42 #30841Bill RobbinsModeratorGood Morning Christian,
For both the header and menu section backgrounds, make them 2000 pixels wide. That’s a good safe size for you.
The header will vary in height, getting taller as the screen width gets smaller. Measure your header’s height on as small a screen as you can, and then add just a little bit to it (20 pixels or so). That’ll give you a header that will always be tall enough for the space it may have to fill.
Again, I’m not trying to be nebulous, but there are a few different ways you can handle the background images. They can stay the exact size that they are created. You can make them always fill the area by stretching/shrinking them to fit (that’s how the home block images work). You can also set them to always show the entire background image. Those are basically the options.
What I would do if this was me, is I would keep the images actual size. The recommendations are set to follow that.
Hope that helps out,
BillJune 22, 2015 at 08:53 #30842RecipeSocialParticipantHi Bill,
Thanks for your reply.
Good to know 2000 pixels is the best option for the width. However, when you say measure the header on as small a screen as possible and add 20 pixels or so. I take it I’m to do this manually with a school ruler? Or it there a website site I can use for this process? How many pixels are there to 1cm?
Thanks,
Christian.June 22, 2015 at 09:05 #30844Bill RobbinsModeratorI would skip on the physical ruler. One way to do that is to take a screenshot of your browser. On my iPhone if I hold down the home button and the button on the top of the screen it will make a screenshot for me. I can then open that up in a photo editor and use its measuring tools to find the height.
I also have a small app for my Mac called Crosshairs that lets me draw a rectangle on my screen and it gives me the dimensions of the rectangle as I make it.
Looking at your site, the header appears to be 365px tall at its highest point.
June 22, 2015 at 09:45 #30847RecipeSocialParticipantI did wonder about the physical ruler method. I was hoping you had a more techy solution. Thanks for the app name, i’ll check that out.
Okay so if the header is 365 pixels at it’s tallest point, if I make it 385 pixels it should do the job right? making the header image 2000 pixels wide by 385 pixels high, do you think this is a safe bet?
Should I make the other image for the bottom with the same dimensions? I take it that the header image will have to be added with some additional CSS and the bottom image can be added via the background image upload feature on the theme settings, is that right?
Thanks,
Christian.June 22, 2015 at 09:53 #30849Bill RobbinsModeratorThat image would also be tall enough for the footer. These will all need to be added via CSS for their respective sections. It’ll be something like this:
#header { background-image: url(https://yoursite.com/header.jpg); background-repeat: no-repeat; background-position: center; } #footer { background-image: url(https://yoursite.com/header.jpg); background-repeat: no-repeat; background-position: center; } #one, #two, #three, #four, #five, #six, #seven { background-image: url(https://yoursite.com/middle.jpg); background-repeat: repeat-y; background-position: center top; }
June 22, 2015 at 10:34 #30850RecipeSocialParticipantHi Bill,
Thanks for your reply and for the code much appreciated.
Okay, so I’m absolutely clear. I presume i’m asking my designer to make up one new image, not two, is that right?
I’ll then enter the above code and add the image via the background image upload option on the theme settings, right?
Christian.
June 22, 2015 at 10:38 #30851Bill RobbinsModeratorTwo image: one for the header, one for behind the menu section that repeats.
June 22, 2015 at 10:42 #30852RecipeSocialParticipantOkay gotcha. Just to be 100% sure, both will be 2000 pixels wide and 385 high right?
Thanks,
Christian.June 22, 2015 at 10:44 #30853Bill RobbinsModeratorBoth 2000px wide. The header needs to be 386px high. The other can be any height, just as long as it repeats.
June 22, 2015 at 10:48 #30854RecipeSocialParticipantGreat, Thanks Bill. Much Appreciated 🙂
Christian.
June 23, 2015 at 00:10 #30866RecipeSocialParticipantHi Bill,
I tested out your code above on the seventh block but it didn’t really do what i’m after.
Ideally I think it would look much neater if the waves could be featured on each section as they are on the Events section, please see attached screen grab.
I’ve also attached a screengrab from section seven which was taken after I added your code. Please see second attachment.
I tweaked the following line of code: background-repeat: repeat-y;
To: background-repeat: repeat-n;
But it didn’t make any difference.
How can I make it so the image works on all sections as it does on the Event section?
Thanks,
Christian.Attachments:
June 23, 2015 at 07:16 #30869Bill RobbinsModeratorIf you’d like a background image to not repeat, the CSS looks like this:
#one, #two, #three, #four, #five, #six, #seven { background-image: url(https://yoursite.com/middle.jpg); background-repeat: no-repeat; background-position: center top; }
Take care,
BillJune 27, 2015 at 01:06 #30958RecipeSocialParticipantHi Bill,
My client has now decided they only want to use the waves in the header and footer of your theme. I’ve added the following code:
#header {
background-image: url(http://yoursite.com/header.jpg);
background-repeat: no-repeat;
background-position: center;
}#footer {
background-image: url(http://yoursite.com/header.jpg);
background-repeat: no-repeat;
background-position: center;
}And amended the image URLs, however the header works but the footer image is not displaying for some reason. Am I missing something?
Also, how can I make more space between the top of the logo and the very top of the site?
I had a play around with this setting: Navigation Top Margin
but it didn’t seem to make any difference and I was sure if that was the right setting anyway.
I’ve checked the header on Safari and on my iPad but it doesn’t display at all.
Am I missing a piece of code?
Thanks,
Christian.June 27, 2015 at 01:14 #30959RecipeSocialParticipantHi Bill,
I’ve just noticed when I logged out of the site, the header waves don’t display anymore.
What am I doing wrong?
Christian
June 27, 2015 at 07:42 #30960Bill RobbinsModeratorYou’re using a caching plugin so when you log out, your changes aren’t visible because the site is showing an older (cached) copy of the front page. After you finish making changes, remember to clear out the cache so that everyone can see them.
For the background for the footer, I think this would work better. Set the image you’d like to have as the footer background to be the site’s background. You can do that in the theme options. Then set it to not repeat and also to be aligned to the bottom. That should place it in the footer.
In Moonrise, the footer doesn’t run full width so to have a background image extend across the browser window, that’s the way to go.
To make your header taller, you can add padding to the top of it:
#header { padding-top: 30px; }
The navigation top margin is for aligning the navigation menu next to a tall logo. Since your site is centered, it’s not something that will change much for you.
Bill
June 29, 2015 at 07:20 #30979RecipeSocialParticipantHi Bill,
Thanks for the CSS, it’s worked a treat! 🙂
I’ve cleared the cache plugin now, all worked fine, thanks for the info.
Regards,
Christian.June 29, 2015 at 08:52 #30983Bill RobbinsModeratorThat’s great news Christian 🙂
Have a great week!
-
AuthorPosts
- The topic ‘Incorporating Design Elements…’ is closed to new replies.