[Support request] why does the image resize itself when I set to the main page?

[Javier Fernández]

Im trying to set a main photo at the page header, the photo has a size that I want, but I don´t know how, the photo get bigger when a put a text in it.

Get bigger with bad quality.

Do you know why happens?

[Tom]

When text is added, the image is used a background image which will try to cover the entire area.

If you don’t want a background image, you can remove the image and add it using HTML inside the content area:

<img src="URL TO YOUR IMAGE" alt="" />

[Javier Fernández]

hi

the URL of my image works when my hosting is open when the hosting is close, the photo disppears from the header!

I have other question, I need to move the image around, how can I do that?

I will get crazy with the headpage!! I just need to set the top of my headsite with no issues.

The content is a bit easier…

[Leo]

Hi there,

You can move the image using some CSS.

If you can provide a link to your site and let us know where you would like to move the image, we will help you out with some CSS 🙂

Let us know.

[Tom]

What do you mean by when your hosting closes? Your hosting/website should always be live?

[Javier Fernández]

hi

I need some Css code to move every element into the headsite: text and photo. But I need move it by myself because sometimes I usually change the photo and text and I couldn´t ask everytime to get a answer, that´s too much for you guys 🙂

I need set text and image in the same line, one to the left: text; one to the right: photo. I´ve tried to set image and text and they set in differet line, photo above, and text under the photo…I don´t know why.

Now, the second question. When you guys talk about url of the image, I login to my cpanel and I get url of that image, I don´t konw if that way is corrent or not. When I log out, the photo from the header goes away.

It is possible that I doing some wrong with the url…

[Tom]

Can you show me an example of a header like you’re trying to achieve?

For the image URL, you would upload your logo in the Media Library inside your WP Dashboard. Then WP will give you the file URL to use.

[Javier Fernández]

hi, look at this page as example:

http://www.maidertomasena.com/

1- Image and text in the same line at the header
2- the main menu is set to the top of the page when you scroll down, in mobile version the main menu goes away when you scroll down.

[Tom]

To achieve that exact thing, you would:

1. Use navigation logo: https://docs.generatepress.com/article/navigation-logo/ and set it to sticky + static.

2. Remove the header: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

3. Set the sticky navigation to desktop only: https://docs.generatepress.com/article/sticky-navigation/

[Javier Fernández]

You make it easy, amazing! 🙂

I went to the hell to figure out how to do all that…and I did´t get it, just some burned face 😀

Now, Once it´s done all that, I need to move a bit logo and main menu from borders of the page, just it!

I mean: logo to the right and main menu to the left just a bit.

[Tom]

Can you show me what you have so far? Should just be some simple CSS to achieve that 🙂

[Javier Fernández]

hi Tom

I have this code, the second one I found and it works, I don´t know if it is correct or what. I need one to move the icon!

.site-header {
display: none;
}

.main-nav {
margin-right: 60px;
}

Here is my website: Javierfernandezphoto.com

[Tom]

Looks like you got it working? Looking good 🙂

[Javier Fernández]

Yes, I´ve found some codes:)

I´ve been using visual composer to set row and columns. And It´s look nice, but, the problem is that I have to use a photo with white background, always. For that reason, I use a generatepress using a photo as header with some html code, right?

the problem: when I add some text on it, the text in mobile versión goes away, photo still there. text dosen´t adapt to the window.

look this page as example, and put it in mobile version getting the window smaller. Text and photo adapt to the window.

http://www.maidertomasena.com/

do you know how to do that?

[Tom]

Background images typically don’t adapt to mobile.

You would have to re-position/replace the image on mobile so it displays better using media queries.

Let me know if you need more info 🙂

[Author]

Posts