Fancy Heading Pictures zoom in too much

[lilialaminae]

I want the images displayed in their original state instead of being zoomed in and cut out. The writing can stay big, but it really looks nicer if everything is proportional to each other. The same thing happens in the Swift Sliders, as well. Why can’t the images be displayed in full size and resize according to the screen type? And, just out of curiosity, why is the RevSlider not ideal?

Thank you for your time. Can I donate somewhere?

[Kyle – SUPPORT]

Because it will be too small, look: http://d.pr/i/15b3S/4FvCAG4n that’s when I set your background to always show the full image, it’s not big enough to cover the section

– Kyle

[lilialaminae]

Hello Kyle,

thank you for explaining. And it isn’t possible to change the height into a maximum height, so the background can dynamically grow and shrink with the width of the screen? I tried to figure it out myself, without success…

[Kyle – SUPPORT]

Not sure what you mean set a maximum height? It already keeps the same height

– Kyle

[lilialaminae]

Well, I just want the thing to behave like the RevSlider. Always display the whole image but shrink/grow it proportionally in width and height. Yes, I could use a RevSlider instead, but I like the general style of the fancy heading and that the headlines are already formatted as h1 and h2. If it’s not possible, never mind. I will have to go through the effort and not use your acutally very useful feature but do everything with sliders.

[Kyle – SUPPORT]

Try this:

.page-heading.fancy-heading {
  background-position: center top !important;
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: auto !important;
}

Like I said, it doesn’t work well, but that’s what you’re asking for

– Kyle

[lilialaminae]

Thank you. I tried it and now it looks like the screenshot. 🙂

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Change to:

@media only screen and (max-width: 1023px) { 
.page-heading.fancy-heading {
  background-position: center top !important;
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: auto !important;
}
}

– Kyle

[lilialaminae]

See the screenshots.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Yeah that’s the issue, the purpose of backgrounds are to cover the content area, which is some cases means some of the background isn’t shown. This is what happens when you set it to show all the time, it doesn’t fill the content area.

Is it because you want the subject on the right of the image to always be shown? Because I can provide different css for that

– Kyle

[lilialaminae]

Okay, let’s try that!

[Kyle – SUPPORT]

Remove the previous css and just add this:

.page-heading.fancy-heading {
  background-position: right center !important;
}

– Kyle

[lilialaminae]

Alright. What I did now is take your code and adapt it to three screen sizes:

.page-heading.fancy-heading {
  background-position: right center !important;
}

@media only screen and (max-width: 767px) { 
.page-heading.fancy-heading {
  background-position: top center !important;
  height: auto !important;
}
}

@media only screen and (max-width: 479px) { 
.page-heading.fancy-heading {
  background-position: left center !important;
  height: auto !important;
}
}

It now looks okay on mobile portrait and laptop screens. The landscape view on my phone still isn’t ideal, neither is it on a tablet, but I’m gonna have to live with this now. I guess this just means that I can’t use pictures like this on this heading.

Thank you very much for your support, once again! I have learned a lot.

[Kyle – SUPPORT]

No problem