Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 3, 2014 at 6:25 am #286510
    killyman

    Trying to figure out how I can add my own custom background image using my Child Theme CSS file. This is what I have so far but it is not showing my custom background image.

    .bg_container {
    background-image: url(http://www.everythingisforever.com/cms_assets/full-bg.jpg);
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    }

    July 3, 2014 at 1:54 pm #286659
    Yigit

    Hey killyman!

    Please try following code

    #main > .container_wrap {
background-image: url(https://www.everythingisforever.com/cms_assets/full-bg.jpg);
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
position: fixed;
z-index: 0;
top: 0;
left: 0;
}

    Regards,
    Yigit

    July 3, 2014 at 5:23 pm #286748
    killyman
    This reply has been marked as private.
    July 3, 2014 at 10:29 pm #286899
    Josue

    Hey!

    Try with this code instead:

    body{
background-image: url(https://www.everythingisforever.com/cms_assets/full-bg.jpg);
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

    Cheers! 
    Josue

    July 4, 2014 at 8:33 am #287064
    killyman

    Great. Works now. Thanks.

    July 4, 2014 at 9:39 am #287073
    Josue

    You are welcome, always glad to help :)

    Regards,
    Josue

    October 27, 2016 at 1:59 pm #704826
    edfaber

    Hey there,

    Sorry for opening an old topic, but I just wanted to accomplish the same thing but it won’t work.

    Any Ideas?

    Regards Martin

    October 31, 2016 at 7:39 pm #706436
    Andy

    Hi,

    I can see that you’re already using a background image on the link you’ve provided. So could you fix it already?

    Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)

    By the way: Please update to Enfold v3.8.

    Best regards,
    Andy

    November 2, 2016 at 1:41 pm #707083
    edfaber

    Hey there,

    Thanks for your response! Yes we use a background image but it just works with the boxed option enabled. So, if I would like to use a Rev Slider or something similar they would appear boxed and not fullscreen.
    I wanted to know if it is possible to set a fullscreen background image with the boxed option disabled.
    Tried it with custom css, but it did not work. 

    html { 
  background: url(bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

    regards Martin

    November 2, 2016 at 4:45 pm #707225
    Vinay

    Hi,

    If you like to use the stretched layout and make the content area look like a boxed layout and add a background image please use the below css

    @media only screen and (min-width: 768px){
.html_header_top.html_header_sticky #top #wrap_all #main {
    max-width: 70vw!important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}}
.wrap_all {
	background: url(/wp-content/uploads/2013/08/main-bg_tile.jpg) #F5F5F5;
	background-size: cover;
	background-position: fixed;
}

    PLEASE NOTE: Since slider is inside the main content area it might appear to be inside boxed layout as well.

    In your case I think you should use 2 colorsection elements one to add your slider and the other below it to add content and background image to it. This is the easiest way to achieve what you are looking for.

    Best regards,
    Vinay

    • This reply was modified 8 years ago by Vinay.
  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.