CSS Code for changing image background.

  • Author
  • #1312361


    Would someone be able to help me with the CSS code needed to change the following:

    When I click on an image (on the home page for example) it opens up a new page and the background is black. How do I change the background to a different colour (or preferably my background image?)

    Many thanks once again!

    The blog I need help with is sydesiderata.com.


    I tried this but it didn’t work:

    img.decoded {
    background: url("http://sydesiderata.files.wordpress.com/2013/06/brannon-whisper-canvas-spa.jpg") repeat scroll 0% 0% rgb(229, 229, 229)



    What you’re describing is our Carousel view, and you could change the background using the .jp-carousel-overlay selector:

    .jp-carousel-overlay {
      /* your background here */

    There are a lot of other elements in the Carousel overly that will look not great with a background other than black. You can inspect those elements using Firebug (for Firefox), or Chrome’s built-in Developer Tools to find the right selectors (that’s how I found .jp-carousel-overlay).


    Thank you for your assistance. I will try out the options :)


    Sorry – where it says “Your Background Here” – is that an image link that I put in eg. http://sydesiderata.files.wordpress.com/2013/06/brannon-whisper-canvas-spa.jpg

    Or is it a color code?


    img.decoded {
    background: url("chrome://global/skin/media/imagedoc-lightnoise.png") repeat scroll 0% 0% rgb(229, 229, 229);
    color: rgb(34, 34, 34);

    This is what I found with firebug


    body {
    background: url("chrome://global/skin/media/imagedoc-darknoise.png") repeat scroll 0 0 #222222;
    color: #EEEEEE

    Sorry this is correct from firebug not the above post.



    This is what you need to add in the CSS editor:

    .jp-carousel-light .jp-carousel-overlay {
        background: url("http://sydesiderata.files.wordpress.com/2013/06/brannon-whisper-canvas-spa.jpg") repeat fixed 0 0 #A9D2CC;

    By the way, don’t use code tags: they produce those erroneous break tags. To display code here, enclose it in backticks (see the note on allowed markup).


    Hi – thank you for the assistance. Unfortunately, the code doesn’t change anything when I put it in the CSS editor and save it.

    Just to clarify – it isn’t the white background in the carousel display in the websites gallery that I would like to change – but the dark grey background that comes up when you click on a single image on any page.


    Thanks justpi for letting me know about the code tags! :)



    a) The code I suggested would make the bg of the gallery carousel display your blugreen textured image. If it didn’t do it, that’s because you’ve already added a similar code to add a white bg, and the one code overrides the other.

    b) But my reply was wrong anyway: I was confused because of mattwiebe’s reply and your question about the “Your Background Here” comment. I paid more attention to that instead of your original question.

    c) You’ve set the images to link to the image file when clicked. The bg you see in that case is not part of your blog, it’s just a new browser window or tab with the image on it. If you want clickable images with a bg you can control, set them to link to attachment pages.

    d) Your images are impossibly large. The one I checked is 4368x2912px, size 3MB. There’s no point uploading such huge files: nobody has a 4368 wide screen, so you’re just slowing down the loading time of your pages and wasting your storage space. If you decide to make the images link to attachment pages, you should use an image editing application to downsize copies of the images to maximum 960px wide, and upload and insert these copies.


    Perfect thank you justpi – that answers my question – I hadn’t explored the option to use the attachment pages.

    Ah yes – thank you for noticing my images are super huge! Will definitely resize them :)


    Justpi – do you by any chance know how to change the size of the exit “x” in the top right hand corner of the image carousel to a larger “x”?



    You’re welcome.

    Add this and increase the value:

    .jp-carousel-close-hint span {
        font-size: 24px !important;

    (By the way, I don’t “know” how to, I examine the page and find out or work out how to.)


    Well you are helping me lots :) I am inspecting the elements through firebug too – but just want to make sure.

    When I put that CSS into the customization – nothing happened. I tried specifying the height as a larger amount but that did not work either. Do you think it is because of the padding around the “x” that is restricting its size?

    When I view the carousel on an ipad the “x” is a reasonable size but when I view it on a laptop screen (11″-17″) it is tiny.



    Sorry, I didn’t expect that. And no, padding has nothing to do with it: it’s because of the order in which the default CSS for the carousel and the custom CSS load.

    One solution I can think of is remove the stubborn X and create a duplicate. Delete my previous suggestion, add this, and again increase the 24 in the font rule:

    .jp-carousel-close-hint:after {
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 4px 4px 4px 4px;
        cursor: pointer;
        display: block;
        font: 400 24px/1 "Helvetica Neue",sans-serif !important;
        height: 22px;
        margin: 0 0 0 0.4em;
        text-align: center;
        transition: border-color 200ms linear 0s;
        vertical-align: middle;
        width: 22px;
        content: "×"
    .jp-carousel-close-hint span {
    display: none !important;

    But I’m sure designsimply can think of a better solution.


    That worked perfectly – I even managed to change to background color of the box to match the website colours! Once again thank you :)

The topic ‘CSS Code for changing image background.’ is closed to new replies.