
-
AuthorPosts
-
May 30, 2025 at 8:59 pm #1484885
Bear with me, I am new to using background images. Having several issues.
I am using a background image in the 1/1 element on my Contact page. The image matches the horizontal px of my site. I would love for the background image to go all the way to the edge of the page on theft and right – to stretch horizontally as needed to match page.
The left & right padding for desktop is set to 0px.
The background image is set: Stretch to fit.
When I expand my page to the right the background image does not ‘stretch’ to fit, it zooms in to fit. Resulting in the top and bottom of the image to be cut off. I would rather the image distort horizontally to fit.In addition, the text box on this page seems to be in a fixed position. I would love for it to stay proportional to the background image, if possible.
Lastly, this page on my phone is not even close. lol
Help, please! :)
June 1, 2025 at 6:58 pm #1484940Hey jkos,
When you set the background image to Scale to fit it scales image, so the whole image is always visible, this includes the height. Which is why the image does not reach the sides.
At Stretch to fit it stretches the image width to cover the page, less the 50px padding that the page has by default.
The height of your column is not set so the content is determining the height, but you have little content so the whole background image is not shown. If you set the column height to 150% then it will show.
But I recommend trying the color section instead because the background image will then be full width. I created a test page linked below to demonstrate.
Since the color section wants to vertically center the content, I added this css to the bottom of the page so your content will be higher:.responsive #top #wrap_all .avia-section.av-minimum-height-99vw .container { display: flex; justify-content: center; margin-top: 15%; max-width: fit-content; }
The reason your text is off the screen for mobile is because your text has 800px padding, which is larger than a mobile screen:
to correct this you could change it to a percentage, or for this I created a css grid for two columns to achieve the layout without padding, and on mobile the grid is stacked. See the test page below.
For others, this is the HTML for the two columns:<div class="parent"> <div class="div1"> first column text </div> <div class="div2"> second column text </div> </div>
and this is the css:
@media screen and (max-width: 789px) { .parent{ grid-template-columns: 1fr; grid-template-rows: 1fr; } } @media screen and (min-width: 790px) { .parent { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; } .div1 { grid-area: 1 / 1 / 2 / 2; } .div2 { grid-area: 1 / 2 / 2 / 3; } }
Best regards,
MikeJune 2, 2025 at 12:53 am #1484949Hey Mike,
We have some good progress. I changed the text padding-left from pixel to percentage. Now no matter how I change the shape of the page the text keeps the creative indentation I want. Thank you for showing me that. I also added some line breaks to the end of my text to allow the background image more room to show.
Still struggling with the background image. Your test page looked like this..
/Users/j-birdteching/Desktop/Contact-test-desktop.jpgThis is what I am hoping to achieve.
/Users/j-birdteching/Desktop/Jkos-contact.jpg
I know some people like a more vertical window and some like a more horizontal window so, fit, distort, stretch, fill, whatever you call it, I would like to always see the entire background image. The image is abstract enough to be able to handle considerable distortion.
/Users/j-birdteching/Desktop/contact-vert.jpg/Users/j-birdteching/Desktop/contact-horizontal.jpg
The next challenge is getting this page to look good on a phone. Is having a separate contact page just for phones something we should be considering?
Doing the left margin by percentage did work for the phone but, I think having 50-60% margin padding on a phone is unrealistic.
The font would have to be a micro font. lol
/Users/j-birdteching/Desktop/contact-phone-2.jpgThe test page you made looks like this on my phone. I could live without the text having the creative indentation and just being uniformly left, right or center justified but, the page didn’t scroll down to see the rest of the text.
/Users/j-birdteching/Desktop/test-contact-phone.jpgWe’ll see what the background image looks like on the phone after we make adjustments to the desktop.
Thank you,
JasonJune 2, 2025 at 12:55 am #1484950I guess this means I don’t know how to attach a picture into our conversation. lol
Could you show me, please.
Jason
June 4, 2025 at 4:33 pm #1485080Nevermind. I figured out my background image on my own.
June 4, 2025 at 9:02 pm #1485086Hi,
Glad to hear that you have this sorted out, shall we close this thread then?Best regards,
MikeJune 5, 2025 at 2:04 am #1485093Yes, we can close this thread. I’m sure there will be more questions later. lol
-
AuthorPosts
- The topic ‘Background image issues.’ is closed to new replies.