CSS help – Different Background on Blog Posts

  • Unknown's avatar
    cafe1505 · Member ·

    Within my theme I have a dark wooden image as the background on my pages. Now I am adding blog posts it is using the same image however all over the page as a pose to the way the page looks. Is there a way to change the background only on blog posts with CSS? or change all the text (titles included) to white? as its all dark you can’t see any text. Any advice would be appreciated!

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, currently you have this CSS in your custom CSS 

    div#content {
    background: rgba(0, 0, 0, 0) url("https://cafe1505.files.wordpress.com/2015/07/untitled1.jpg") repeat scroll 0 0;
}

    which is putting the wood background on all pages.

    Are you wanting that background only for the front page? If so, we can change your above code to the following, which uses the “home” CSS class set in the opening body HTML tag on that page. 

    .home #content {
    background: rgba(0, 0, 0, 0) url("https://cafe1505.files.wordpress.com/2015/07/untitled1.jpg") repeat scroll 0 0;
}

    Then if you have a different background to use everywhere else, we can use something like this. 

    #content:not(.home) {
    background: rgba(0, 0, 0, 0) url("URL_OF_IMAGE") repeat scroll 0 0;
}

    This tells the browser to apply this to all pages that do not have a class of “home”.

  • Unknown's avatar
    cafe1505 · Member ·

    Many thanks for this. The main issue is because there is one image on all the pages, when I do a blog post it applies this image all over the page so you cant see any text which is different to the pages where the image is more of a border.

    I have tried to change the colour of all the text to white so it can be seen but obviously I cant change the title colour (without changing the whole website colour)

    I realise this is a bit confusing but basically with this image all over the website you cant see text on my blog posts because the image is dark wood.

    I don’t mind not having any image on blog posts but keeping it on all pages (home included)

    Hope this was clear!

  • Unknown's avatar
    thesacredpath · Member ·

    If you wish to have the background on all static pages, including your home page, but not blog posts, then we can change the selector to the following.
    .page #content

  • Unknown's avatar
    cafe1505 · Member ·

    amazing! thank you!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘CSS help – Different Background on Blog Posts’ is closed to new replies.