Hello Pro homepage background image help?

[tahir]

How to change homepage background image (blue one, full width).
I searched option for it but couldn't find any settings.
Can anybody help me, i want to insert custom image or may be custom color.

[Victor Font]

Link to site please.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[tahir]

Thank you for fast response sir.
Here is the link.
Site Link

[PyramidWeb]

Hi there,

Method 1:
In your "style.css", search for:

.top {
	background: #8192b3 url('images/bg-gray-header-diamonds-right.jpg') center right no-repeat;
	background-size: cover;
	width: 100%;
	padding: 30px 0 0 0;
	margin: 0;
	color: #fff;
}

You can change the background for the "GRAY (Default Styles)" if you want to keep the possibility to change styles later on, for example:

.top {
	background-color: #ff0000;
	background-size: cover;
	width: 100%;
	padding: 30px 0 0 0;
	margin: 0;
	color: #fff;
}

Method 2:
Otherwise, here is another possibility: In the same "style.css", search for

.top {
	width: 100%;
	padding: 30px 0 0 0;
	margin: 0;
	position:relative;
}

and change it (for example) to

.top {
	background-color: #ff0000;
	width: 100%;
	padding: 30px 0 0 0;
	margin: 0;
	position:relative;
}

Hope this helps.

[PyramidWeb]

One more thing:
If you choose Method 2, make sure you select the default style (that is, "gray") in the customizer and comment out the line that sets the background image for this default gray style

/* background: #8192b3 url('images/bg-gray-header-diamonds-right.jpg') center right no-repeat; */

Otherwise, this line will overwrite the background you set. Probably, Method 1 is the easier choice.

[tahir]

Thank you for the help.
I just replaced images/bg-gray-header-diamonds-right.jpg WITH custom image.
BUT i have an issue, the image right side is not in right place, it fits above 20px above.

Please check back my site and recommend what shoul i do.

[tahir]

I am talking about this image
https://onlinelegit.com/wp-content/uploads/2015/12/linda-transparent-gray.png

It is about 20px above the bottom line of black background image. I don't know how to fix it. Can you please help.

[PyramidWeb]

The problem: The p in "home-image" has a margin-bottom of 24px. That's why the image is not down at the bottom where it should be.

Try adding

.home-image p {
    margin-bottom: 0;
}

after

.home-image {
    display: table;
    float: left;
    line-height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 45%;
}

If your current gray background image is not just a placeholder and you want to keep the dark gray background, I would recommend to use "background-color: #ff0000;" instead (replace "#ff0000" with the hex-code of your color).

[Author]

Posts