Background Image with White Middle

  • 1
  • Question
  • Updated 7 years ago
I am trying to add a background image to my website but the design is making it hard to read my text and see the images. Therefore, I would like the middle of my background (beginning and ending at respective sides of the header) to be white. When I tried doing this on my own several times it would look okay during the preview but not be lined up correctly once published. Does anyone know the dimensions or have a template I can use to do this?
Photo of lordhavemercyfilm


  • 1 Post
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Emmy


  • 5892 Posts
  • 299 Reply Likes
Do you currently have the background added to a page on your site; if so can you give us a link to the page so that we can have a look at it. If I am understanding correctly, you would like your background image to be centered on the page better? Thanks!

Kind Regards,
Photo of Callum


  • 357 Posts
  • 32 Reply Likes
You could wrap your content in a white box with some CSS.

Insert this code into a HTML widget:

<style type="text/css">
div#whitebox {
background: white;
border: solid black;

Then, (I think this'll work), place a HTML widget at the very top of your page containing the code: <div id="whitebox">
Then place a HTML widget at the bottom containing: </div>

I think this should work

Hope this helps,

Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
@Callum: Thanks for this! But, the way the Yola site builder does it, it has other </div> 's after the HTML widget. It is something like this:

<div id="58695" class="html_default">The HTML you put is here</div>

So if you do that it basically uses the other div closing tag to close it. I wish that there was a way around this but there isn't (as far as I have found out). But your code would work if it wasn't for all of the extra code. Thanks!

But, there is another code you can use. Here is one:

<style type="text/css">

body {
color:black; /*This is the Font Color of the page*/


But if you give us the URL I can view the source and then see if there are other divs that I can style to style that part of the page. Just let me know the URL and I will look! :)