karimphoto Posted May 18, 2014 Share Posted May 18, 2014 Hi, I having problem with the placement of the background image which is generated with the plugin Background Manager together with the theme Touchfolio. Here is how my page looks now and this is how I would like it to look and funktion. Basically I would like to be able to adjust the placement of the image. I’m using Firebug and Chrome Developer Tools but don’t find where to do the changes or place the code… The custom stylesheet in background manager is not doing anything for me. In the end I’m looking for a solution with a background image viewer that changes on on page (re)load and resize to different screen sizes and mobil devices… If I activate full screen mode in background manager it looks good on my phone and it also make the image responsive, but on non mobile device it covers the whole screen witch I don't want. If anyone have some input for me I would be very happy Thanks Link to comment Share on other sites More sharing options...
dsonesuk Posted May 18, 2014 Share Posted May 18, 2014 Have you tried background-size, adjust to your needs body.myatu_bgm_body { background-attachment: fixed !important; background-color: #FFFFFF !important; background-image: url("http://karimphoto.com/wp-content/uploads/2014/05/20140419-_MG_2465.jpg") !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: auto 90%; /*added by dsonesuk*/ } 1 Link to comment Share on other sites More sharing options...
karimphoto Posted May 18, 2014 Author Share Posted May 18, 2014 Have you tried background-size, adjust to your needs body.myatu_bgm_body { background-attachment: fixed !important; background-color: #FFFFFF !important; background-image: url("http://karimphoto.com/wp-content/uploads/2014/05/20140419-_MG_2465.jpg") !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: auto 90%; /*added by dsonesuk*/ } Thanks allot @dsonesuk Now the custom stylesheet is working and I used the code with some adjustment you gave me. Maybe this works fine, I need to do some testing on different browsers and devices... body.myatu_bgm_body { background-attachment: fixed !important; background-color: #FFFFFF !important; background-position: 83% center !important; background-repeat: no-repeat !important; background-size: auto 85%; } Another thing I'm thinking about is that the image is sliding under the left sidebar if I make the screen size smaller. Any idea how can work on this? Thanks again Link to comment Share on other sites More sharing options...
Day Posted May 18, 2014 Share Posted May 18, 2014 Another thing I'm thinking about is that the image is sliding under the left sidebar if I make the screen size smaller. Any idea how can work on this? Thanks again It looks to be behaving correctly to me, can you show us a screen shot of the issue? Also, your photography is amazing! 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 18, 2014 Share Posted May 18, 2014 (edited) The reason the overlap occurs is the use of center for background position: it will center to browser window, ignoring elements such as sidebar/header, since the background image is expanding to available height, try setting start position of 60px instead of center, so it will be under the sidebar/header when it positions itself at top when width is to small. body.myatu_bgm_body { background-attachment: fixed !important; background-color: #FFFFFF !important; background-position: 81% 60px !important; /*amended by dsonesuk*/ background-repeat: no-repeat !important; background-size: auto 85%;} Edit:The background image would be better place in "main-wrap" if possible then you can use footer (or add margin) as same height as sidebar/header to centre it equally from top/bottom Edited May 18, 2014 by dsonesuk 1 Link to comment Share on other sites More sharing options...
karimphoto Posted May 18, 2014 Author Share Posted May 18, 2014 It looks to be behaving correctly to me, can you show us a screen shot of the issue? Also, your photography is amazing! Thanks Day. I'm glad that you like my work. The reason the overlap occurs is the use of center for background position: it will center to browser window, ignoring elements such as sidebar/header, since the background image is expanding to available height, try setting start position of 60px instead of center, so it will be under the sidebar/header when it positions itself at top when width is to small. body.myatu_bgm_body { background-attachment: fixed !important; background-color: #FFFFFF !important; background-position: 81% 60px !important; /*amended by dsonesuk*/ background-repeat: no-repeat !important; background-size: auto 85%;} Edit:The background image would be better place in "main-wrap" if possible then you can use footer (or add margin) as same height as sidebar/header to centre it equally from top/bottom I see what you mean with the sidebar/header. It's maybe not a problem to leave it as it is, but thanks for explaining and I'm going to give it a try and see if it look better with your code. Can you please explain more about this "Edit:The background image would be better place in "main-wrap" if possible then you can use footer (or add margin) as same height as sidebar/header to centre it equally from top/bottom"? Right now I'm using this code but still having problem to get it right on some mobile devices... body.myatu_bgm_body { background-color: #FFFFFF !important; background-position: 81% center !important; background-repeat: no-repeat !important; background-size: auto 85%; } @media (max-width:850px) { body.myatu_bgm_body { background-position: 0 0; background-size: contain; } Thanks again to both of you Link to comment Share on other sites More sharing options...
dsonesuk Posted May 19, 2014 Share Posted May 19, 2014 "Edit:The background image would be better place in "main-wrap" if possible then you can use footer (or add margin) as same height as sidebar/header to centre it equally from top/bottom"? Ignore it! it seems it would make it even more complicated doing this Link to comment Share on other sites More sharing options...
karimphoto Posted May 21, 2014 Author Share Posted May 21, 2014 Ok, the header is not a problem. I only need help to get it to work on Samsung Galaxy... This is how it appears on a Samsung now: https://www.dropbox.com/sh/6c6l6nd7164e4lg/AACox2XrU3lqvpznd7jkNedFa Using this code: body.myatu_bgm_body { background-color: #FFFFFF !important; background-position: 81% center !important; background-repeat: no-repeat !important; background-size: auto 85%; } @media (max-width:850px) { body.myatu_bgm_body { background-position: 0 0; background-size: contain; } } Anyone that have a solution I can try with? http://karimphoto.com/ Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now