issue with fancy heading background image

[aaa_webmaster]

On my pages the fancy heading background image jumps out of the screen on the right side.When I reduce the browser size (by dragging the edge), from a specific size on the image resizes nice and well. When I increase the browser size, from this specific size on the image switches into a big on where the right side is outside the screen. By the way: I havn’t found any notes about the optimal image size for alle the different purposes. (like revolution slider, fancy header backgroud, team members, etc. …). Is there a list somewhere? best regards from Berlin

[harriscauler]

I’m also having a similar problem. All the images I’ve tried on the fancy background zoom and get cut-off and moved to the right. I’ve attached a screenshot of what my blog image looks like…

This is a link to the actual file – it’s plenty big enough that it shouldn’t need to be zoomed or cropped…

http://www.fusepointe.com/wp-content/uploads/2013/11/desk2-e1387061534192.jpg

[mgma]

ANyone have any luck on this? This has really screwed me up… same on the parellax images… they just go huge at full resolution. can’t seem to stop it. Help?

Thanks!

[mgma]

and the image and background color fades so fast at full resolution, that there is a big open space where it was, before you have moved down to the copy area. Just can’t use it like this. I tried some CSS with no luck.

[Tahir – SUPPORT]

Hello,

Here are some screenshots to supplement the process of finding out dimension of html elements from the demo.

1: Right-click on the html Element and choose the Inspect Element option from the drop down. See screenshot: http://prntscr.com/2bkium .

2: Selecting or hovering over an html element in the Chrome Browser tools tab will show you the dimension of that specific element . See screenshot http://prntscr.com/2bkjbx .

I believe adding the right dimension images should fix the issue you guys seem to be having . If not please provide links of the pages that are affected so we can take a look.

Thanks
Tahir

[mgma]

Thanks. But the issue is with the fancy header background, not the logo. I am a seasoned CSS user, and was able to get it to not go extremely large…

http://bigidea.pro/360/lcb/motor-vehicle-accidents/

but I’m still wondering how to stop it from fading out so quickly on scroll. Please see screenshot attached here… while scrolling it fades out so quickly and there is a huge blank area where it was before reaching the copy. How can I stop this from fading out so quickly, or make it not fade out at all… just stay static and scroll up with the rest of the content… like it does at mobile resolutions??

Thanks for your help!!

[harriscauler]

@mgma – how did you get the image to appear correctly in the fancy header? (Mine still goes to the right and is very zoomed in…

@Tahir Marvi – SUPPORT – We’re not asking about the logo. We’re asking about the fancy header background… (see my screenshot above)

Thanks

[mgma]

Kindof a blur at this point. But I think this is it. It’s line 4145 in my style.css…

.page-heading.fancy-heading {

background-attachment: local;

background-color:#343538 !Important;

background-position: center center !important;

-moz-background-size: 100%;

-webkit-background-size: 100%;

background-size: 100%;

background-repeat: no-repeat!important;

background-position-x: 0!important;

text-align: center;

padding-top: 120px;

padding-bottom: 120px;

display: none;

}

[Bobby B.]

I also am having this fancy header background problem. See screenshot below. Developers, how do we fix this! This is out of the box functionality that doesn’t work right!

[Bobby B.]

BTW, @mgma, that css seems to break the image resizing for mobile devices. See screenshot.

[harriscauler]

I don’t want to have to modify the CSS to make the fancy header images work correctly – they work right in the Dante demo, so shouldn’t they work right on our sites? It would be great if Ed could comment with any ideas about what we’re doing differently than what he’s done with the demo.

[Bobby B.]

Ah, found what made the difference for me. Instead of “background-size: 100%;”, it needed “background-size: cover;”

I agree with @harriscauler, we should have to be messing with CSS to make this work!

[harriscauler]

Thanks @bobbyb – changing that to cover fixed it on my site as well.

[mgma]

Interesting Bobby. Mine in iPhone looks great. Will take a look…

Thanks.

[aaa_webmaster]

Hi all. It is really confusing because there are different strategies to set a header backgroud image and they behave different on different devices.
– It seems that a fancy heading background image is not ment to be a background which is fixed in it’s position. If used Like in the Dante Demo: http://dante.swiftideas.net/pages/about/ , it doesn’t matter if the image moves out somewhere.
– If I set the background in Theme Options/Asset Backgrounds then I get the most stable situation but the image still jumps to a different position if check the page with a smaller browser size or on an ipad.
So at the moment there seems to be no reliable setup for a background image in a fix position on every device … See attached files.

@Tahir: Thx for your hints. This is very helpfull. But for this issues resizing the images was unfortunately not helpfull…

Is there another solution?