• 0

Branding area with background image, nav bar and social icons


Question

Posted · Report post

I used a two column layout to get a logo and the social icons into the header but I also need a background image to sit to the right of the header content. I can't use another media box because I need the social icons to sit in this area. 

 

Using the background image option in the header didn't seem to work  - it was scaled up which was ok but I couldn't get it in the right position. 

 

Next option:  I created a class and used CSS to get the image loaded but the positioning just doesn't work - ( I also tried with %). 

 

.header {
background-repeat:no-repeat;
background-position:top right;
}
 
This is the page: 
 
Maybe someone has better way of doing this? This is the header spec I received from the client which is just a guide.... http://nicholaspealldesign1.com.gridhosted.co.uk/header/
 
And a PS. the current setting isn't so bad in chrome but in Firefox it doesn't render correctly at all - the social icons knock the background graphic to the left.

Share this post


Link to post
Share on other sites

4 answers to this question

  • 0

Posted · Report post

Probably have to put a column within in the right column... which will be pushed below the first one. Put a background image on one and the media box in the other? Maybe...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

There are more possible options available to you for positioning the background: http://www.w3schools.com/cssref/pr_background-position.asp

 

Here's what I'd do.  Remove the column sidebars, and apply your background to the header, without the CSS.  Just use the header's background option.

 

Add a three column section.

 

Set the width of the left-most column to 7. The next column should be 2, and the last (right column) should be 3 wide.

 

In the left column, use a media box to add the logo.  In the middle column, add a text area and add your social media.  Then, clone the text area, drag the clone to the 3rd column and add your image for the leaf-shaped green bit. Position that with CSS by wrapping the image tag in a unique class. Use margins, padding and alignment to position that part.  You can also do that with your social media.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for the input.

 

When uploading an image in the header options area it is scaled to the size of the header - therefore I had to create an image that was the correct pixel width (or slightly larger) to enable it to be placed in the correct location. Using CSS to position doesn't appear to make the slightest bit of difference. I softened the side of the image in photoshop - now the alignment which isn't consistent across all browsers isn't so noticeable.

 

I chucked the social icons into a  text box and used some padding to shunt them further south. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for the input.

 

When uploading an image in the header options area it is scaled to the size of the header - therefore I had to create an image that was the correct pixel width (or slightly larger) to enable it to be placed in the correct location. Using CSS to position doesn't appear to make the slightest bit of difference. I softened the side of the image in photoshop - now the alignment which isn't consistent across all browsers isn't so noticeable.

 

I chucked the social icons into a  text box and used some padding to shunt them further south. 

 

Any css I put in the custom box didn't appear do anything either. What I do is always have another Chrome tab open, BUT in incognito. I alwyas puplish to I can see what it looks like in the incognito tab. Plus most of the time I found I had to use !inportant to overide any other nested css. You might have to play with this, but it's already helped a few DMS'ers in the forum:

 

I removed all padding by using this css in the Custom CSS/LESS Custom Code editor - give it a go - shazam!

 

/*
Header Logo - remove all padding
*/
.pl-area-wrap {padding-top: 0px !important; padding-bottom: 0px !important;}
.mediabox-wrap {min-height: 0px !important;}
.pl-section-pad {margin-bottom: 0px !important;}
.alignleft {margin-bottom: 0em !important;}
.the-media-html p {margin-bottom: 0px !important; margin-top: 0px !important;}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now