Colour change image in header and footer

[MoonTreasures]

I’ve uploaded a background image for the header and image for the footer. The image is clear black and white, but when I add it to the page the white colour in the header image turns greyish and the picture is not really clear (see screenshot header). With the image in the footer the black background colour of the image turns greyish as well (see screenshot footer). I want the background of the image to have the same black colour as the background of the footer.

What do I have to do to make this work?

 

Also I would like to have the texts in the footer (verzending, retour, etc.) in rows next to the image. Is that possible?

I used this html code in the copyright text of the theme editor right now:

<FONT SIZE=”4″ COLOR=”white”>
<p>        Verzending       Retour       Algemene voorwaarden       Privacy</p>

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

1. Please add below code to JanStudio > Theme Option > General Layout > Custom CSS

#jas-footer::before, .page-head::before {
display: none;
}

2. I see the the image and text now in a row as you want, what you want more?

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[MoonTreasures]

Hello Harry,

I added the code you gave me, but it didn’t had any result on the color of the images. The images still have a grey overlay over the image.

 

My second question maybe wasn’t really clear. What I meant was that the text lines need tot be placed under eachother next to the image. Like this:

Verzending

Retour

Algemene Voorwaarden

Privacy

Can you help me with that?

Thanks in advance

[Harry]

Hi,

1. Please clear cache on your site or your browser

2. please go to Appearance > Widgets

– Add your image to footer#2

– Go to Appearance > Menus > Create new menu with link to Verzending, Retour, Algemene Voorwaarden, Privacy after that go to Appearance > Widgets > Footer#3 and add Custom Navigation http://prntscr.com/ohnuoq and assign the menu you create to this widget.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[MoonTreasures]

Thank you Harry. It solved the problem with the footer.

My problem with the background image of the highlighted background image behind the header text isn’t solved yet. It still has a grey overlay over the image (see screenshot). What can I do get rid of the grey overlay and have the original colour?

Attachments:

You must be logged in to view attached files.

[Harry]

This reply has been marked as private.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[MoonTreasures]

I uploaded a new image with width 1920×200. The black colour of the image still gets a bit grey when used in the header. I want it to be same colour black as the black in the footer. Can you tell me what te problem is?

[Harry]

Hi,

I check the page https://moontreasures.nl/winkelwagen/ it still use small image https://moontreasures.nl/wp-content/uploads/2019/07/webshop-tijgers.jpg 844 x 597

Please change with image 1920 x 200

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[MoonTreasures]

Thank you.  That helped. The colour is black now.

I’ve got another questions: Is it possible to set two pictures of the tigers on the left and right side of the header text that move when the text line is getting longer?  Because now sometimes the text is before the image when the text line gets to long.

I adjusted a screenshot that show you an image of the situation we don’t want to have

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

I’m sorry. The tigers is fixed in the photo it can’t respond follow the text.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[MoonTreasures]

I know that it’s not possible with a tiger that is fixed in the picture. But is there a possibility to have a total black background (without tigers) and add two seperate images of a tiger (like the one I attached to this topic) that lay over the background and that move with the text?

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Please save the image with 2 tigers as .png without background and add below code to JanStudio > theme option > general layout > custom css

.page-head {
	background-color: #000;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[MoonTreasures]

I don’t get it. I guess I have to save two seperate image of the tigers as .png. Correct? But what do I have to do with them afterwards? Use them as background image for the header? (I tried, but I can only use one fixed picture as background). Or something else?

And what do you mean by saving these images without background?

 

I pasted the code in the css, but it doesn’t change anything.

 

Maybe a better word for what I want to set up is ‘a floating image next to the header’. I’ve found something here, but I want the image only to float with the header: https://www.w3schools.com/css/css_float.asp

 

Can you help me?

[Harry]

Hi,

I’m sorry the background can’t do like content so can’t use float for background.

I think you can increase space between 2 tigers and save as new image for background.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[MoonTreasures]

Nothing to do about that. Thanks for your help. We’re gonna look for another option for the header image.

[Author]

Posts