Frontpage Background Image

This topic has 6 replies, 2 voices, and was last updated 7 years, 1 month ago by Wes.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
March 15, 2017 at 1:25 am #20875
Felix
Customer
Hello together,

I have just installed the Aspire Child Theme and have a few questions / issues.
Here is a link to my page which is still under construction: http://www.airsicht.com

1) I uploaded the Frontpage Background Image under Featured Section 1 Image. The recommended size was 1600 x 1050 pixels which I have used. However, the picture still shows up as blurry as if it is to small and needs to be blown up…

2) I would like to reduce the height of the Image which I think can be done by changing the max-height in the front-page-one section (line 1525):
.front-page-1 {
max-height: 740px;
position: relative;
}

3) I then want to change the position of the text to always be in the middle (vertically). I know that the vertical alignment (line 1473) is already set to middle so I wonder why the text still comes up too low. Somehow I have the suspicion that the image extends below what’s visible and then the text aligns to that and therefore doesn’t come out as I want it.

In summary: I want a smaller 100% scaled and non-blurry image and the text always on top of it and in the middle.

The funny thing is that if I look at the page with a very narrow device then suddenly the background image seems to scale just fine and is no longer blurry.

Really hope that someone can help.

Many thanks,
Felix
March 15, 2017 at 2:23 pm #20883
Wes
Moderator
What screen size are you viewing your site from? I’m looking at it from a 13 inch MBP the image doesn’t seem blurry.

The text appears to be vertically aligned already. If it’s not showing that way on your end, then it must be due to the screen/browser size. I can take a look at my larger screen once I get back home if that’s the case.
March 16, 2017 at 12:30 am #20886
Felix
Customer
Hi Wes, thanks for your reply!

I am looking at it from a 13′ retina MBP as well. Have a look at this link and you’ll see that the palm trees are a little bigger on the site than in the 100% scaled original: http://www.airsicht.com/wp-content/uploads/2017/03/tri_hotel_drone_20170107-23.jpg
On my iPhone it’s much sharper as well.
Actually, now that I look at it again it might just be that the original image gets scaled down when I look at it outside the website whilst on the website it’s displayed in 100% and therefore a little less sharp (due to image quality). But then why does it appear sharper on my iPhone?

Have you got any idea how I can solve the other two problems? i.e. palm image with less height (which I know roughly how to do) and then text aligned middle and not at the bottom so that it becomes invisible if I make the palms too short?
March 18, 2017 at 5:17 am #20909
Felix
Customer
Hi, can anybody here help to reduce the height of the frontage background image and change position of the text to always be in the middle (point 2 and 3 above)?
March 19, 2017 at 1:51 am #20927
Wes
Moderator
This reply has been marked as private.
March 21, 2017 at 3:09 pm #20952
Felix
Customer
Wes, thanks a lot for your help. I’ve followed your advise, commented out part of the front-page.php and played with the padding. I haven’t tested different browsers yet but on Safari and Chrome it seems to be fine and iPhone looks okay as well…
For the moment I am not planning to change the text very often and it’s only for the first landing page.
Do you see any issues with this, specifically because you said the text would show up weird?
March 22, 2017 at 1:02 pm #20960
Wes
Moderator
If you already followed those steps then it shouldn’t show up weird. It looks fine on my end as well.
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.