Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • November 6, 2014 at 3:47 pm #347121
    famewebdesign

    Hello,
    Is it possible to add a image as background for the whole page, including header and footer? An example of what I mean is the wooden background on this site: http://www.moostwanted.com/
    Offcourse the header and footer still need to be visible but maybe with a opacity or something like that.
    If this is possible, can you explain me how I can create this?

    Thanks for your answer!

    November 6, 2014 at 4:57 pm #347174
    famewebdesign

    Never mind … Already found it: body background … ;-)

    It’s about http://www.loffs.nl/wp
    Now I added the background image, I would like to create a light transparency on the header and footer. Is there a way to do this?

    And is it possible to let the logo fall half over the slider?

    Thanks for your answer!
    Martine

    November 6, 2014 at 5:17 pm #347182
    Yigit

    Hi!

    You can set background image or header and footer in Enfold theme options > General Styling tab.
    Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed

    strong.logo {
position: relative;
top: 40px;
}

    Regards,
    Yigit

    November 6, 2014 at 5:35 pm #347197
    famewebdesign

    Thanks for your answer Yigit!

    I added your code.
    My settings are for Header Custom Height 300 px because of the size of the logo. When I add your code, the header area enlarges. Indeed the logo falls over the slider. But one of the reasons I want the logo to fall over the slider, is because I want a smaller header.

    So, is it possible to let the logo fall over the slider (like now on http://www.loffs.nl/wp) and in the same time increase the height of the header?

    November 7, 2014 at 9:15 am #347581
    Ismael

    Hey!

    Thank you for the update.

    Can you please provide a screenshot on how you want the header to look like? You can use imgur, dropbox, clipular etc.

    Best regards,
    Ismael

    November 7, 2014 at 9:32 am #347588
    famewebdesign

    Hello Ismael,
    Here’s the link to dropbox: https://www.dropbox.com/s/cfnrju4dta06pf5/loffs.JPG?dl=0

    These are the settings I used to create the current location of menu and logo:

    strong.logo {
    position: relative;
    top: 150px;
    }
    .main_menu {margin-top: 100px;}

    So, I would like to increase the height of the white background in the header. Also, I would like to give the white background of the header some opacity so the wooden background of the website will show a little bit.

    Hope you can help …

    November 7, 2014 at 10:38 am #347629
    Arvish

    Hey!

    To make the header slightly transparent, add the following to Quick CSS or custom.css:

    .header_bg{
  opacity: 0.4 !important;
}

    Tweak the opcaity value(0 – 1) to increase or decrease the transparency.

    Best regards,
    Arvish

    November 7, 2014 at 10:56 am #347640
    famewebdesign

    Thanks Arvish! That works!

    Can you explain me why it’s not working when I’m adding this code also:
    .main_bg{
    opacity:0.7!important;}
    .footer_bg{
    opacity: 0.7 !important;

    Do you maybe also know how I can increase the height of the header (the transparent part).?

    November 7, 2014 at 12:44 pm #347686
    famewebdesign

    Already fixed. Thank anyway! ;-)

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘full screen background image’ is closed to new replies.