Background image covering entire site rather than container

[vmenniti]

My website is: http://andreiathoughts.com/

I'm trying to setup a background image that does not cover the centre are of my page IE: the content area, only the outer areas so I have less white space. Here is an example of what I am looking to do: https://boldanddetermined.com/

I'm trying to use this plugin: https://wordpress.org/plugins/simple-full-screen-background-image/ a highly rated background image plugin. However, every time I do it ends up covering the entire website so the content is unreadable.

How can I achieve this? Any help would be tremendously appreciate. Thank You.

http://andreiathoughts.com/

[Victor Font]

Add the image to body, then background-color the header and site-inner with white.

---

Regards,

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

[vmenniti]

Is there a way to accomplish this with a plugin? Or do you have a code example

[Andykev]

body {
	background-image: url("http://YOUR-URL-GOES HERE.jpg")!important;
	background-repeat: no-repeat;
        background-size: cover!important;
        background-position: center center !important;
	background-attachment:fixed;
	color: #222;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.625;
}

On line 144 of your .css you can change or add this to it. Your image should be sized and optimized to fit the screen, typially 1980px wide or so. I use a background image and using photoshop, make it "opaque"..then save it. The result is a full sized "washed out" image. You can use a regualr image also if you desire.
This image "floats" in the background and your text and other content shows up on top. You can adjust it depending on your theme containers. "Cover" vs "Contain" as an example. One fills all visible space, the other keeps within the container.

It is not quite like the example your shared, but it looks very nice. You can also use .page-id to add separate images to different pages if you wanted to do that as well.

[vmenniti]

Thanks for the tip Andy!

[Author]

Posts