No background header picture alignment between Safari, Firefox and iPad Browser « Support Forum | Kriesi.at

Support Forum » Newscast

No background header picture alignment between Safari, Firefox and iPad Browser

5 posts from 3 voices

Started 4 months ago by VilaDoiPhone
Latest reply from Ismael
This topic is closed
This topic is resolved

Tags:

VilaDoiPhone
Member

Hello, we are using Newscast theme with some changes, using less resources.
After change Header Picture Background (bg.png), i just dont get the same aligment on this 3 browsers - Safari and Firefox for Mac and Safari for iPad.
link: http://www.viladoiphone.com.br

screenshots on photobucket:
Safari on iPad: http://i251.photobucket.com/albums/gg306/tchello3/SafariiPad_zps5c94864a.png
Firefox on Mac: http://i251.photobucket.com/albums/gg306/tchello3/FirefoxMac_zps277cfef8.png
Safari on Mac: http://i251.photobucket.com/albums/gg306/tchello3/SafariMac_zpsef94adab.png

I just try a lot of changes on style.css without success, could you guys help?
Thanks in advance!

Posted 4 months ago #
Devin
Moderator
Hi VilaDoiPhone,

You should use background position to get it set instead of just using one large image. Also, align your main logo into the center of the image instead of all the way to the left.

See: http://www.w3schools.com/cssref/pr_background-position.asp

So where you have:
```
body {
background: #f2f3f5 url(../images/skin1/bg.png) repeat-x 0 0;
color: #666;
}
```
You could use this instead (as long as you change the image so that the logo elements are in the center:
```
body {
background: #f2f3f5 url(../images/skin1/bg.png);
color: #666;
background-repeat: no-repeat;
background-position: top center;
}
```
Regards,

Devin
Posted 4 months ago #
VilaDoiPhone
Member

Hello Devin!

I got you. Better to use a smaller picture and centralized.
I've change picture size and css code follow your suggestion.
Now, css code looks like:

body {
background: #f2f3f5 url(../images/skin1/bg.png);
color: #666;
background-repeat: no-repeat;
background-position: center top;
}

But, i don't know why, image is not centralized and still repeating. Is like css no consider background-position instruction.
A screenshot to help understand:

http://i251.photobucket.com/albums/gg306/tchello3/ScreenShot2013-01-10at111512PM_zps5020e4dc.png

Any suggestion?

Thanks in advance!

Posted 4 months ago #
VilaDoiPhone
Member

Hello Devin!
Just disconsider my last post.
It was a error on server.
CSS code is working

Thanks!

Posted 4 months ago #
Ismael
Moderator

Hey,

Glad it is fixed. :)

Regards,
Ismael

Posted 4 months ago #