[Solved] Placement of background image

[karimphoto]

Hi,

I having problem with the placement of the background image generated with background manager. Here is how my page looks now and this is how I would like it to look.

Anyone have any input for me?

Thanks

[Paulie_D]

The second link isn’t a background image at all as far as I can tell but clearly this is a WP issue.

I’ll move it over there since it involves a plug-in.

[karimphoto]

Thank you Paulie_D and sorry for that.

I’m using the theme Touchfolio and use a plain wordpress page as a static “landing” page. Through that page I have inserted the image Set generated by background manager for WordPress.

Hope this is clear enough

[chrisburton]

It looks the same to me besides the dimensions.

@Paulie_D This appears to be a CSS issue not PHP.

[karimphoto]

@chrisburton thanks.

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…

Thanks

[Paulie_D]

Seems to be related use of a WP plug-in which is why I thought it would be more relevant in the PHP/CMS section but Im happy to move it back.

[karimphoto]

I got some help and now it look better.

body.myatu_bgm_body {
background-attachment: fixed !important;
background-color: #FFFFFF !important;
background-position: 81% center !important;
background-repeat: no-repeat !important;
background-size: auto 85%;
}

And I put it in the custom stylesheet.

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?

[Atelierbram]

13em is the width of the sidebar, so when it’s background-position: 13em center; , the image lines up with that left sidebar. At 850px when the menu becomes “hamburger dropdown in top right corner”, you could change that in a mediaqueryto background-position: 0 0 ; or something;

@media (max-width:850px) {
   body.myatu_bgm_body {
    background-position: 0 0;
    background-size: 100% 100%;
  }
}

[karimphoto]

Thank you @Atelierbram.

Sorry but I really don’t understand what this would do?

Maybe it’s not a issue with the left sidebar and I can leave it as it is…

[Atelierbram]

Sorry but I really don’t understand what this would do?

It will fix the image sliding under the left sidebar if the screen size gets smaller .

Maybe it’s not a issue with the left sidebar

It has to do with those two (the sidebar and the background-image) getting in each others space when the viewport gets smaller, and the fact that the background-image has a horizontal background-position declared in a percentage (relative to the viewport/browser-window) that will shift that position when the viewport size changes.

and I can leave it as it is…

But why not try?

BTW: do you understand what media-queries are, or do?

[karimphoto]

You are right I should give it a try. I’m newbie to this so I would be very happy if you would like to guide me.

Should I replace my code with yours or add it?

If I add “background-size: 100% 100%;” will the image not cover the whole screen then?

My previous code I put in the custom stylesheet for my background image set, is the where I should put your code?

Sorry for my poor skills and thanks for your time.

[Atelierbram]

Should I replace my code with yours or add it?

You can just add it to your custom stylesheet, (mind the !important), or /✳ out-comment ✳/ the property-value pairs you are overwriting.

If I add “background-size: 100% 100%;” will the image not cover the whole screen then?

If that is not what you want on small-screen, then why not change it to something else …

[karimphoto]

Great. It almost work super. It looks great on Iphone 4 but not so good on other phones like Iphone 5 and Samsung Galaxy models…

The code I’m using now is:

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;
}

[Atelierbram]

@karimphoto
Last closing curly brace } of media-query is missing (CSS declarations are nested within those {} ); should be:

@media (max-width:850px) {
   body.myatu_bgm_body {
     background-position: 0 0;
     background-size: contain;
   }
}

Browsers can trip over something like this: could explain inconsistencies …

[karimphoto]

@Atelierbram Thanks.

On Iphone 4 it looks good
On Iphone 5 it looks good in portrait mode but in horizontal mode it adjust the image to the right…
On Samsung Galaxy,,, it looks bad in both portrait and horizontal mode, the image will not center or adapt to screen size.

I did add the last closing curly brace. Anything else I missed here?

Thanks

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;
}
}

[Author]

Posts