making my background color transparent

  • Resolved blake5253

    (@blake5253)


    7 years, 5 months ago

    I have two separate issues I’m trying to sort out with my website.

    first, I’d like the header image to be the only image in the background (it’s already effectively the background image) with the page content displayed on top of it. Is there a way I can completely remove the background image/color (which acts like a footer image) or make it transparent (depending on how it looks, that might actually be better)? I have tried a few different methods, but none have worked

    second, I’d like to add my company logo to the left side of the menu bar rather than in the middle of the page

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • darnelldibbles

    (@darnelldibbles)

    7 years, 5 months ago

    Hi there,

    For the first question, I might need more clarity on what you are wanting to do. So, you want the header image to be the only image in the background with the text/content overlaying the image? And are you saying you want all other panels stripped of a background image? It looks like that is what you currently have set up on the front page, but I could be misunderstading.

    second, I’d like to add my company logo to the left side of the menu bar rather than in the middle of the page

    So you are wanting to add your logo along side your navigation bar? A straightforward to do this is to add an actual image icon to your navigation bar through a plugin or through CSS. Here is information on how to both here.

    Since you are using it as a logo and not a actual icon menu item, you can just put in a “#” in the URL space to make the image unclickable.

    Hope this helps.

    Thread Starter blake5253

    (@blake5253)

    7 years, 5 months ago

    The theme is set up so that the header image is the one that actually acts as a background image right now, and the black section at the bottom is the actual background image, even though it doesn’t really act like one. That black “background” is what I’m trying to make transparent.

    for the logo, I tried NavMenu images to do that, but I had 2 issues with it:
    -the menu seems to have a preset number of menu items that can fit on one row of the menu, and what I have hits it exactly. When I try to add the logo, It bumps the last menu item onto a new row below the second, even though there’s plenty of space on either side for one
    -I would like it to be in the far left, as opposed to where the current menu items are, but the margins for the menu items seem to be set to not allow this (it may be that both issues are tied into the setting of the margins, however)

    darnelldibbles

    (@darnelldibbles)

    7 years, 5 months ago

    Hi there,

    So, I had a few people look at this. Regarding the background, it would require a major change because it’s just not designed the way you’re wanting to have set up, even after some CSS tweaking. You could choose a different theme, or get more extensive customization assistance for this theme from a CSS expert or freelancer. That also goes for the logo issue – it goes beyond the scope of support. Hopefully you can get some assistance with getting the site the way you want,

    Thanks,

    Thread Starter blake5253

    (@blake5253)

    7 years, 5 months ago

    I had kind of figured that would end up being my only option, but it was worth a shot. Thanks

    • This reply was modified 7 years, 5 months ago by blake5253.
    Thread Starter blake5253

    (@blake5253)

    7 years, 5 months ago

    for anybody interested, I have found a way to accomplish this. It basically forces an image over the original background to act as a new BG image

    <!DOCTYPE html>
<html>
<head>
<style>
body {
   
    background: url('') no-repeat center center fixed;  no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
</style>
</head>
<body>

</body>
</html>

    I had to go in and add it as a custom html item on each page individually, so it was a bit of a pain, but it worked fine

    • This reply was modified 7 years, 5 months ago by blake5253.
    umponcel

    (@umponcel)

    7 years, 5 months ago

    Great job! Can we see example of the result ?

    Thread Starter blake5253

    (@blake5253)

    7 years, 5 months ago

    absolutely, the website is http://www.edrywall4u.com.

    Something is wrong with it at the moment, and I’m not sure what. I had been trying to work out how to put a transparent shadow over the entire image, to make the text more universally legible, with no success, and I thought I changed it back to the original (just the background image, no added element for the shadow), but I’m not 1–% sure that I did, and came back after the weekend to see just a gray box on the top half (where the original header image was), so I’m trying to figure out what went wrong there.

    EDIT: scratch that, I got it back to the full image. Now just trying to work out how to add a shadow element to match the top half. Any insights there would be appreciated

    • This reply was modified 7 years, 5 months ago by blake5253.
Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘making my background color transparent’ is closed to new replies.