[Resolved] Background Image Positioning

[Anthony]

Hi, I loaded a background image in the body section, but I need to position it so the top of the image meets the bottom of the navigation. (link below) Maybe you could elaborate on how to use these left top, x% y%, xpos ypos (px)? For example, what values would I need to make the above work? Here it is the website –
http://www.expertcomputerhelp.com

Thanks! 🙂

[Leo]

Hi there,

This link here explains it: https://docs.generatepress.com/article/backgrounds-overview/#position

You would need the top to be 0.

[Leo]

Actually I think what you want is to add the background image to the Content section instead of body.

[Anthony]

I just removed the body image “that positioned itself behind the header image”, with a content image like you said, it didn’t do what I want. I would like it to be full width without disrupting anything else.

[Tom]

Any chance you can post a link to what you have so far?

Also, if you have an example of what you’re wanting to do, that would help as well.

Thanks! 🙂

[Anthony]

Sure. This is the way the background image looks in body without any position adjustments. I want the top of the image to sit at the bottom of the navbar – http://www.expertcomputerhelp.com

[Tom]

Try applying it to the container:

.site.container {
    background-image: url(http://expertcomputerhelp.com/wp-content/uploads/2017/06/expert-computer-help-background-LQ-BW.png);
    background-repeat: no-repeat;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Anthony]

Nope. I would like the top of the background image to be positioned just under the navbar and to be full width like you see, just lower.

[Leo]

Hmm I don’t see Tom’s CSS being added? How are you adding them currently?

[Anthony]

I added Tom’s code to the “Additional CSS”. But once I saw what the code did I removed it. That code put the image in the content area. I want the body image to be full-width and positioned right at the bottom of the navbar.

[Tom]

Hmm, right. The CSS I gave would be contained.

You could try pushing your image down using the “Position” field under where you uploaded the image: 0 500px

[Anthony]

That worked, Ty. 🙂

[Tom]

You’re welcome 🙂

[Author]

Posts