Jump to content

Placement of background image in Wordpress


karimphoto

Recommended Posts

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 :rolleyes:

Thanks

Link to comment
Share on other sites

Have you tried background-size, adjust to your needs

 

body.myatu_bgm_body {
background-attachment: fixed !important;
background-color: #FFFFFF !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: auto 90%; /*added by dsonesuk*/
}
  • Like 1
Link to comment
Share on other sites

 

Have you tried background-size, adjust to your needs

 

body.myatu_bgm_body {
background-attachment: fixed !important;
background-color: #FFFFFF !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

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!

  • Like 1
Link to comment
Share on other sites

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 by dsonesuk
  • Like 1
Link to comment
Share on other sites

 

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

 

"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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...