Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #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! :)

    #1484940

    Hey 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:
    Screen Shot 2025 06 01 at 12.06.32 PM
    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,
    Mike

    #1484949

    Hey 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.jpg

    This 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.jpg

    The 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.jpg

    We’ll see what the background image looks like on the phone after we make adjustments to the desktop.

    Thank you,
    Jason

    #1484950

    I guess this means I don’t know how to attach a picture into our conversation. lol

    Could you show me, please.

    Jason

    #1485080

    Nevermind. I figured out my background image on my own.

    #1485086

    Hi,
    Glad to hear that you have this sorted out, shall we close this thread then?

    Best regards,
    Mike

    #1485093

    Yes, we can close this thread. I’m sure there will be more questions later. lol

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Background image issues.’ is closed to new replies.