Position/Size Problem With Featured Image On Individual Pages Of Posts

hrhngx · Member · Dec 11, 2014 at 8:19 pm
Copy link

Add topic to favorites
My featured images [width, height, align etc] are already OK on my main posts-page…
But on the individual pages of my posts, my featured image exceeds the top-line; also top & bottom parts of the image look cropped and then my background [image] appears beneath the featured image…
How can I pull down and fit them there?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 11, 2014 at 8:59 pm
Copy link
Hi there, add the following and see if it does what you are looking for.
```
.single.single-thumbnail .entry-background {
    top: 0;
}
```
hrhngx · Member · Dec 11, 2014 at 9:45 pm
Copy link
Unfortunately, this has just pulled down featured images and covered the background but this time, it has appeared above the featured image…
And featured image height is still not %100; remains there like a short blanket on the bed…
Sorry for my ignorance in advance but I think, the problem will repeat unless we also expand & fit the featured image there, sir…
Thanks for your patience…
thesacredpath · Member · Dec 12, 2014 at 3:56 am
Copy link
Along with the change I gave above, add this to the bottom of your CSS. It relocates the site title and the menu button down onto the top of the image on the single post pages.

As far as the image cropping and such, the CSS uses a background-size declaration with “cover” which works to make the image “cover” the entire area. With “cover” there can be some cropping if the image is not the exact proportions of the div the image is placed in, and on responsive width themes, that changes with browser window and screen sizes.

If you go to http://aegaeusmann.me/2014/10/31/henry-mancini-love-theme-1969/ and then narrow down your browser window, you will see that at about 1350px in width, the entire image is shown.

You could force the issue by changing the height in .single.single-thumbnail .entry-background to something like 120 or 140%, but then that may cause issues with other images that are not the exact same proportions.

All of the above is sort of a long way of saying that I don’t see anyway to keep your images from being cropped at some widths.
thesacredpath · Member · Dec 12, 2014 at 3:57 am
Copy link
Oops, I forgot to include the additional CSS to try:
```
.single #masthead {
    position: absolute;
    right: 0;
}
```
hrhngx · Member · Dec 12, 2014 at 7:24 pm
Copy link
Now, all clear about featured images!
Thank you very much for your help, sir!
And thank you very much also for sharing your deep knowledges…
It is an honour & pleasure for me to discuss a thread with you here…
Actually I’ve already been familiar with you and your wisdom since I was just a reader on forum from outside; looking up solutions for my previous issues…
The way you approach the problems and you respond the members while trouble-shooting individually here has already had my attention…
And now, I feel very lucky for that I had your attention to benefit from your ideas and experiences, too…

By the way, as we’ve just discussed nearly about headers/banners, do you mind if I ask how I can keep my header transparent on my front/static page when I change my default header to plain #000000 for the rest of my website?
thesacredpath · Member · Dec 12, 2014 at 10:49 pm
Copy link
If I’m understanding correctly, the following will hide the background image on your main page, and turn the background of the main page black.
```
body.home.custom-background {
    background-image: none;
    background-color: #000;
}
```
thesacredpath · Member · Dec 12, 2014 at 10:51 pm
Copy link
And on second thought, I may have misunderstood. Do you want to keep the background image on the main page, but have the background on the other pages black?
thesacredpath · Member · Dec 12, 2014 at 11:00 pm
Copy link
And thank you for the kind words.
hrhngx · Member · Dec 12, 2014 at 11:11 pm
Copy link
Well, sorry for my complicated descriptions, sir…
When I make any changes on header ; the one on front page [like all over my website] changes, too…
I’d just like to keep my front page from any changes when I do that…
And I was just inspecting my elements on browser and noticed there; as I can understand, they start with .page and .blog or similar addresses before to distinguish the destination for the following commands…

.blog .site-header {
background: #000000;
}

That’s it, right? Is that OK?
thesacredpath · Member · Dec 12, 2014 at 11:31 pm
Copy link
Yes, if you want the site header background on your blog page to be black, that would be the correct code. By including the .blog CSS body class, you are limiting the change to the blog page.
hrhngx · Member · Dec 13, 2014 at 12:29 am
Copy link
Exactly, sir! I couldn’t give you the necessary details and miss the points while suffering from describing my issue in English and using unnecessary/irrelevant words which made you confused and exhausted there…
And personally, I am still working on it…

Well, you simply summarised all up also with cool terms such as “CSS body class” for “.blog” that I read & write but did not know what they exactly mean before…
Thank you very much again, sir…
thesacredpath · Member · Dec 13, 2014 at 12:48 am
Copy link
You are welcome, and don’t worry about your english. You are doing great and we’ll work at it and get the solutions to your questions.

No items found.