How can i add an image background in the Wayfarer Template

  • Unknown's avatar
    koolpartys · Member ·

    Can someone please help me with adding a background image to my site in the wayfarer template?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, can you tell me where exactly you are wanting to add the image, and have you uploaded the image to your media library? If so, can you give me the URL of that image so I can work with that particular image?

  • Unknown's avatar
    koolpartys · Member ·

    Hi!

    Yes i uploaded the image, and I was trying to have it placed as a background image for the footer on each page. I also wanted it to have an opaque black overlay so that it isnt hard to read text over the image. Heres the url:

    Thanks a bunch!

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, and thanks for the clarification and link. Let’s start with the following, which adds the image. We can add an overlay of transparent black to the footer widgets area (the second rule below does that). 

    .site-footer {
	background: url('https://koolpartys.files.wordpress.com/2017/02/red-fog-bk.png') no-repeat scroll left top / cover;
}
.site-footer .footer-widgets {
	background-color: rgba(0, 0, 0, 0.3)
}

    If you want the entire image to be darkened, then I would suggest editing the image in an image editing program and darkening it, or adding an overlay layer with a slightly opaque black to it. See what you think with the above and let me know.

  • The topic ‘How can i add an image background in the Wayfarer Template’ is closed to new replies.