Home Forums Weaver Xtreme Theme Header Widget Area Not Conforming to TRANSPARENT

This topic contains 12 replies, has 3 voices, and was last updated by  scrambler 5 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #55168

    babcockam
    Participant

    The website I am working on isn’t allowing me to use “transparent” in the header widget area.. but it allows me to change it to different colors.

    I have also placed “transparent” in the Outside Background, Wrapper Area BG & Container Area BG… but it’s not taking?

    http://mediadevsite6.com/

     

    #55170

    scrambler
    Moderator

    You need to elaborate here.

    Your header widget area has no background color, so it IS a transparent background, as is your wrapper, as is your overall background.

    But you basically have no color underneath it all, so it is white (I suppose the browser default).

    So you need to explain what it is exactly you are trying to do.

     

    #55175

    babcockam
    Participant

    I have a background image in there and I need the header area to be transparent so that you can see the top of the image.

    #55182

    Weaver
    Keymaster

    The background image of the family is on the #container which does not include the header. If you put a bg color on the wrapper, you’ll see it behind the header.

    You’d need to get the bg image on the #wrapper to make it work like I think you want – under the header.

    #55273

    babcockam
    Participant

    Thank you, placing the image into the wrapper did put the image where I want it, but I have now lost the paralax feature on it.

     

    Is there a way to place it there but have the page scroll over it?

     

    Thank you!

    #55276

    Weaver
    Keymaster

    You can custom CSS style the image. For example, you could create a class called .make_parallax and add it to the area that has the url() for the bg image. Or put it directly in the class/style with the bg image url().

    .make_parallax {
    background-position: center center;
    background-size: cover;
    background-attachment: fixed; }

    #55278

    babcockam
    Participant

    I tried placing the code into the Additional CSS with the Wrapper BG Image, but it still didn’t take as a parallax. Is this where I was supposed to put it?

     

    I’m not sure how to class/style the  bg image to directly.

    #55281

    scrambler
    Moderator

    You misunderstood weaver’s explanation.

    But all you need is add just the CSS rule to your wrapper BG CSS+ box

    {background-position: center center;background-size: cover; background-attachment: fixed; }

    #55317

    babcockam
    Participant

    I am inserting a picture. I placed that code in the Wrapper BG Image – Additional CSS box, but it still isnt’t working…

     

    Picture Capture

    #55321

    scrambler
    Moderator

    These boxes are different than the regular CSS+ boxes, you must not include the curly brackets.

    background-position: center center;background-size: cover; background-attachment: fixed;

    Confusing I know 🙂

    #55333

    babcockam
    Participant

    Oh my… lol. Usually when you don’t need the {} there’s a little side note stating they aren’t required.

     

    THANK YOU SO MUCH!!!

    #55455

    babcockam
    Participant

    So It is working on desktop view, but no image is showing up on mobile. Is there some additional CSS I can use for this?

    #55461

    scrambler
    Moderator

    Please provide a link to the site. The link in your first post goes to an empty site

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.