[GreaterGoodSolutionsParticipant]

Hello, at the top of my homepage (staging.wanderingearl.com) I would like to have a centered header with an image of the blog founder at the right of it. I have tried the following:

• Centering the text in a single column and using a background image for the section. The problem here is that I have to push the background image far to the right in Photoshop and save it as a png in order to get the image to display to the right of the text. This makes it very difficult to control size and likely causes issues with responsiveness.
• Using multiple columns. This doesn’t work because then the text is not centered on the page.

In essence, I think I need to control the size of the background image and be able to float it right while maintaining responsiveness. Can you please let me know the best way to do this?

Thanks in advance!

[ChristopherModerator]

Hi there,

Instead of adding image element, please add image as column background image, to do this add following code in column’s style field :

background-image: url(http://staging.wanderingearl.com/wp-content/uploads/2016/04/earl-66.png);background-size: contain;background-position: top center;background-repeat: no-repeat;
}

Hope it helps.

[GreaterGoodSolutionsParticipant]

Thank you for the prompt response and the information. However, it doesn’t seem to fix my centering issue.

I tried it two ways:
1. Replaced the existing image element with the background-image style – displays the same and the text is still off center since the section is 2 columns
2. Made the section a single column and added the background-image style to it – this centers the text of course but then the image displays behind the text, not next to it.

Thoughts on how to proceed? Thanks again.

[FriechModerator]

Hi There,

Make that Section a one Column Row. Place the Image element (of the blog founder) on the very top of that section, and then add a class img-derek to it. And then add the Custom CSS below on your Customizer.

@media (min-width:  980px) {
	.img-derek {
	position: absolute;
	z-index: -1;
	right: 0;
	}
}

Unwrap this CSS rule on the @media (min-width: 980px) if you need this layout for all screen views.

Hope it helps, Cheers!

[GreaterGoodSolutionsParticipant]

Thanks for your help but something is still wrong. I’m not sure if I’m misunderstanding you or if I have the syntax wrong or something (hard to do when you’re cutting and pasting) but this doesn’t work either. It simply puts the picture at the top of the section.

This is what I did:
Made section 1 column
Added image to the top of section
Added img-derek class to img
Added the following to customizer (unwrapped min-width: 980px because without it the section didn’t appear at all on larger screens)
@media min-width: 980px {
.img-derek {
position: absolute;
z-index: -1;
right: 0;
}
}

Thanks again and I look forward to hearing from you.

[Rue NelModerator]

Hello There,

Do you want to display it like this?

Please have the css code updated and use this instead;

@media (min-width: 980px) {
  #x-section-1 .img-derek {
    float: right !important;
  }
}

Hope this helps.

[GreaterGoodSolutionsParticipant]

Thank you but the problem is that I need the text to be centered on the page with the image off to the right. Is this possible?

[ChristopherModerator]

Hi there,

Please add this CSS :

img.x-img.img-derek.x-img-none {
    float: right;
}

Please add pbn in section #1 class field.

Hope it helps.

[GreaterGoodSolutionsParticipant]

Thank you but to be honest I am now thoroughly confused about what I’m supposed to be adding and what should be removed. I think you want me to add the following to the CSS via Customizer:

@media (min-width: 980px) {
#x-section-1 .img-derek {
float: right !important;
}
}

img.x-img.img-derek.x-img-none {
float: right;
}

And then assign the section a class of pbn and assign the column with the image in it the class img-derek. Is this correct?

If so, it does not work, it still pushes the text off center.

Can you please clarify exactly what code we’re using now since we’ve changed it so many times?

Thanks in advance, I appreciate your help with this.

[LelyModerator]

Hello There,

Yes, that will be the issue if we use an image element inside the same column. It will push the text off center because it will occupy space on the right side of the column container.
The best we can do is to add the image as background to make sure that the text will always on center of the column and the image will always be on the right. Although this might result to overlapping text and image.

From your current setup, please do the following:
1.) Remove the image element.
2.) Add this CSS:

.img-derek {
    background-image: url(http://staging.wanderingearl.com/wp-content/uploads/2016/04/Wandering-Earl.png);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    min-height: 300px;
    border: thin solid transparent;
}

Hope this helps.

[GreaterGoodSolutionsParticipant]

Thank you but that’s not going to work either. The image doesn’t display until the screen is small enough and when it does it’s directly behind the text.

Based on the feedback I’m getting, what I am trying to do is just not going to work and I’ll need to figure out something different.

Thanks again for all your help, you guys are great!

[Rue NelModerator]

Hello Again,

With the same image setup in my previous reply here (https://community.theme.co/forums/topic/background-imagecentered-header/#post-905175), you can make use of this code:

@media (min-width: 980px) {
  #x-section-1 .img-derek {
    position: absolute;
    right: 20px;
    bottom: 0;
  }
}

To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[GreaterGoodSolutionsParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Another support here and tried the CSS given at #910150 and it’s working. The texts/content are centered while having the image on right. Unless, you’re trying to achieve different layout. How about providing a mockup design of what we should expect?

That way, we can finalize the CSS before you can implement it.

Thanks!

[GreaterGoodSolutionsParticipant]

Thank you but I’m not sure what you mean by working. The attached images are screencaps of what I’m seeing. On my laptop screen (‘fullscreen’) the image doesn’t appear at all until I narrow the screen to around 30% and then when it appears it is behind the text (‘smallscreen’). I have attached a couple of mocks, ‘desired_wide’ and ‘desired_narrow”. Desired_wide is what the site should like on wide screens. On narrow screens the image can pop to the top if need as seen in desired_narrow. Thanks again for your help!

[Author]

Posts