Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • June 2, 2015 at 9:07 pm #453383
    sjoisw

    I’ve tried editing the css script to have a background image on a specific page, but it doesn’t work. Could someone check this out and tell me where I’m going wrong:

    .page-id-1605 .main_color, .page-id-1605 #main
    {
    background: transparent!important;
    border: none!important;
    background-image: url(http://www.joycewolthuis.nl/wp-content/uploads/2015/05/joyce-wolthuis-fotografie-0001.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;
    }

    June 3, 2015 at 12:36 pm #453701
    sjoisw

    Could someone please advice me? I’ve tried several things and I think it has something to do with the main_color, but I don’t know what the correct code would have to be.

    June 3, 2015 at 12:43 pm #453707
    Guenni007

    could you please give us the link to the page where you tried to do so.

    Edit:
    ok i see the page id and the link is than:

    http://www.joycewolthuis.nl/portret/

    • This reply was modified 9 years, 6 months ago by Guenni007.
    June 3, 2015 at 12:45 pm #453708
    sjoisw

    http://www.joycewolthuis.nl/portret/

    June 3, 2015 at 12:53 pm #453712
    Guenni007

    why do you want to do it with #main : try

    body.page-id-1605 {
    background: rgba(0, 0, 0, 0) url("http://www.joycewolthuis.nl/wp-content/uploads/2015/05/joyce-wolthuis-fotografie-0001.jpg") repeat scroll 0 0 / cover ;
}

    and perhaps you take a little shadow for the font:

    .page-id-1605 h2, .page-id-1605 span {
    text-shadow: 3px 3px 8px #333;
}
    • This reply was modified 9 years, 6 months ago by Guenni007.
    June 3, 2015 at 1:00 pm #453716
    Guenni007

    you could set background-positon to center center:

    body.page-id-1605 {
    background: rgba(0, 0, 0, 0) url("http://www.joycewolthuis.nl/wp-content/uploads/2015/05/joyce-wolthuis-fotografie-0001.jpg") repeat scroll center center / cover ;
}

    and if you like you can use a transparent effekt on wrap_all:

    .page-id-1605 #wrap_all {
    background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
}
    • This reply was modified 9 years, 6 months ago by Guenni007.
    June 3, 2015 at 2:35 pm #453772
    Yigit

    Hey!

    Please refer to @guenni007’s post above.

    @guenni007     thanks as always :)

    Regards,
    Yigit

    June 4, 2015 at 8:29 am #454284
    sjoisw

    Yes, got it to work!! Thanks all.

    The only problem I have now is that on my Iphone the image isn’t responsive. 

    .page-id-1605 .main_color, .page-id-1605 #main {
  background: transparent!important;
  border: none!important;
}
body.page-id-1605 {
    background: rgba(0, 0, 0, 0) url("http://www.joycewolthuis.nl/wp-content/uploads/2015/05/joyce-wolthuis-fotografie-0001.jpg") repeat scroll 0 0 / cover ;
}
  
.page-id-1605 h2, .page-id-1605 span {
    text-shadow: 3px 3px 8px #333;
}
    • This reply was modified 9 years, 6 months ago by sjoisw.
    June 4, 2015 at 8:35 am #454287
    sjoisw

    I have this now. 

    .rand { border: 5px solid #ffff; }
.page-id-1605 .main_color, .page-id-1605 #main {
  background: transparent!important;
  border: none!important;
}
body.page-id-1605 {
    background: rgba(0, 0, 0, 0) url("http://www.joycewolthuis.nl/wp-content/uploads/2015/05/joyce-wolthuis-fotografie-0001.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;
}
}
  
.page-id-1605 h2, .page-id-1605 span {
    text-shadow: 3px 3px 8px #333;
}

    Thank you. :)

    June 5, 2015 at 1:02 am #454854
    Josue

    Try changing background-size: cover to background-size: contain or background-size: 100% 100%.

    Cheers!
    Josue

    June 5, 2015 at 1:13 pm #455071
    Guenni007

    btw – how do the visitors come to your website then?
    is there no Link to the Rest with navigation ?

    edit: well if you use 

    body.page-id-1605 {
    background: rgba(0, 0, 0, 0) url("//www.joycewolthuis.nl/wp-content/uploads/2015/05/joyce-wolthuis-fotografie-0001.jpg") no-repeat fixed center center / 100% auto;
}

    it will be with no overflow but there are dark bars on top and bottom
    if you use 100% 100% – i guess this is not for a real foto (portrait) a good solution (crushing)

    if you use contain instead of cover than the smallest part is set to 100% and the bigger part is set to auto
    (bars either on top/bottom or left/right)

    • This reply was modified 9 years, 6 months ago by Guenni007.
    June 8, 2015 at 5:17 am #455701
    Rikard

    Hi @sjoisw!

    Did you manage to solve your problem or do still need help?

    Cheers!
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.