Background image visible behind content – suits theme

  • Unknown's avatar
    itstimeforchai · Member ·

    Hello!
    I am absolutely new to wordpress and css and was hoping to get some help here. Ive tried googling and playing around with a bunch of things but seems like I’d need css specific to this theme to make it work.

    I don’t want the background image to appear behind the content and want that area to be white instead so the content sits on top of white space that’s just the width of the content. Any help would be much appreciated!

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, add the following CSS which turns the background behind the content white. You can of course adjust the color if you want something other than white. The left and right padding is to give a little bit more white space at the left and right sides of the content.

    .site-main {
    background-color: #FFFFFF;
    padding-left: 10px;
    padding-right: 10px;
}
  • Unknown's avatar
    itstimeforchai · Member ·

    That worked like a charm! Thanks a ton!

    Now that it’s in place, I am not sure I like the look of it being just in the center content area. is it at all possible to extend the image in to the header and footer area in the same way? Right now it covers the strip of area below the footer completely and none at all in the header. I want to try and carry the same left and right flanking through the header and footer area with the center remaining white. I hope that makes sense.

  • Unknown's avatar
    itstimeforchai · Member ·

    On second thought, I’d like the footer to just stick to the bottom instead of displaying a strip of the background image below it. I am guessing after that the footer has to be re-sized to the same width as the content so the header+content+footer is the same width and on white space with the background image flanking through the right and left from top to bottom.

    I was able to research a bit to find a way to re-size the navbar to the same size as the content and then make the header background transparent which extends the left and right flanking of the background image all the way to the top, but also fills in behind the header/title area as well. Is it possible to keep that space white similar to the content? I haven’t enabled any of it yet as Im not sure if that’s the right way to go about it. Sorry for the rambling, just want to make sure I explain myself. Many thanks!

  • Unknown's avatar
    designsimply · Member ·

    is it at all possible to extend the image in to the header and footer area in the same way?

    I think you’ve updated your site since you posted this question. I checked http://itstimeforchai.com/ and I don’t see a background image, so it’s a little hard for me to envision. You could turn the background white in the header and footer for the same middle content width area using the following CSS, but I’m not 100% sure I’ve interpreted your question correctly. Try it out though!

    header > a,
footer .site-info {
	background: yellow;
}

    I set the color to yellow just so it would be easy to spot, you should change it to #fff before saving if you test the example and the CSS does what you were expecting.

    On second thought, I’d like the footer to just stick to the bottom instead of displaying a strip of the background image below it.

    Here’s an example that will position the footer area to the bottom of the page in the Suits theme:

    #page > footer {
	position: fixed;
	bottom: 0;
	width: 100%;
}

    It’s not really a good solution if you’re going to use a background color for the main content area though, because of how it ends up looking really disconnected from the top part of the theme. If you also changed the entire bottom footer strip to a different color, it might work. Here is an example:

    .site-info-container {
	background: #eee;
}

    I was able to research a bit to find a way to re-size the navbar to the same size as the content and then make the header background transparent which extends the left and right flanking of the background image all the way to the top, but also fills in behind the header/title area as well. Is it possible to keep that space white similar to the content?

    This will change the background just for the part of the navigation that’s in the center:

    .main-navigation {
	background: #fff;
}
  • Unknown's avatar
    itstimeforchai · Member ·

    Thank you Thank you Thank you! That helped a ton.

    I am not sure what happened to the background image when you looked at the site. I logged in today and bam, it was just gone! Deleted from my images folder even :( Not sure what happened. But it was an easy enough fix to re-upload. Now that you see the image, maybe it makes more sense!

    I was able to take what you suggested and tweak it a little bit (I am getting bolder with my lacky-CSS skills) to get what I envisioned. I have a simple neutral pattern in the background, so I thought that letting it run all the way top to bottom with the header+content+footer sitting on top of it will not look too busy. Can you tell me your thoughts on that? I took your suggestion and toned down the color of the footer, but left it scrolling.

    There is a thin stripe of the background pattern running below the footer. You should be able to see it now. This was what I meant when I said I wanted the footer to stick to the bottom. To not be able to see the background pattern leak through there. Sorry if I wasn’t clear earlier. Is there anyway to fix that? If not, I am not terribly bothered by it. I’ve learnt so much already! :)

  • Unknown's avatar
    designsimply · Member ·

    I have a simple neutral pattern in the background, so I thought that letting it run all the way top to bottom with the header+content+footer sitting on top of it will not look too busy. Can you tell me your thoughts on that?

    I like simple. The background pattern doesn’t look too busy to me. I like it!

    I took your suggestion and toned down the color of the footer, but left it scrolling.

    You might even consider making the footer background white.

    There is a thin stripe of the background pattern running below the footer. You should be able to see it now. This was what I meant when I said I wanted the footer to stick to the bottom.

    Keep in mind different people will have different screen sizes compared to you, so the strip you’re referring to could be bigger or smaller depending on display size.

    I would leave the spacing at the bottom as is. I think separating the footer and sticking it to the bottom (fixed) would look funny on large screens.

  • Unknown's avatar
    itstimeforchai · Member ·

    I didn’t think about how different screen sizes would affect that view. I’ll keep it as is.

    This is the perfect jump off point for me right now. Thanks so so much for all the help. I appreciate it a lot! :)

  • Unknown's avatar
    designsimply · Member ·

    Cheers :)

  • The topic ‘Background image visible behind content – suits theme’ is closed to new replies.