Content background transparency – help!

  • Resolved hebridesgirl

    (@hebridesgirl)


    12 years, 8 months ago

    I am using the Esplanade theme on a new WP site I am building for a friend.

    I can easily change the background to an image. However, content is published with a solid white background, therefore hiding most of the background image.

    I need to make this content box/background semi-transparent in order for the image to show through.

    Can anyone help please? I have trawled the forums and google to no avail, despite there being many similar questions out there.

    Thanks in advance!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 8 months ago

    Could you link to a webpage with the issue?

    Thread Starter hebridesgirl

    (@hebridesgirl)

    12 years, 8 months ago

    Sure, try http://www.eileanfraoich.co.uk/our-island/

    Ignore the “home” page as that’s from their old site, built by someone else. Will be removed once this new site is ready to go live.

    Also, the background image is currently just a colour gradient I uploaded but I would like to use a proper image (e.g. a landscape or object) if I can make the content background semi-transparent.

    Thanks!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 8 months ago

    You can’t make the white invisible without making the grey invisible. Do you want to make the grey invisible? If not, you could instead apply the same gradient background to the white instead, for example: http://awesomescreenshot.com/0af1o2dbc2 .

    Thread Starter hebridesgirl

    (@hebridesgirl)

    12 years, 8 months ago

    That is definitely an option. However, I’d be happy to make the grey semi-transparent as well (I think).

    I would perhaps try your first option initially and see how it looks – if possible, could you give me the code for changing the white background to an image please and I’ll see if that’s ok?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 8 months ago

    Sorry, I don’t know why I’m saying “invisible”.

    You can try the first option by adding this CSS to your Child Theme style.css file:

    .page-template-template-sidebar-content-sidebar-php .content-sidebar-wrap #content {
 background: #feff61 url('http://www.eileanfraoich.co.uk/wp-content/uploads/2013/08/background.png') no-repeat;
}

.page-template-template-sidebar-content-sidebar-php .entry {
 background: none;
}

    Thread Starter hebridesgirl

    (@hebridesgirl)

    12 years, 8 months ago

    Ok, almost there. I’ve replaced the image with the kind I would like to see behind the content and it looks good…to a point. The yellow background is still underneath and because the image does not cover the full length of the post, the yellow shows at the bottom.

    Any idea of the best way to fix this please?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 8 months ago

    Remove this part of the code I recommended:

    #feff61

    To address the issue of your image not covering the content you could give your background image a size of ‘cover‘, for example:

    .page-template-template-sidebar-content-sidebar-php .content-sidebar-wrap #content {
 background: url(path/to/image.png) no-repeat;
 background-size: cover;
}

    Thread Starter hebridesgirl

    (@hebridesgirl)

    12 years, 8 months ago

    You’re an absolute angel – thank you!!!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 8 months ago

    No worries.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Content background transparency – help!’ is closed to new replies.